App.vue

<template>

  <div>

    <button @click=“captureScreenshot”>スクリーンショットを取得</button>

    <br>

    <br>

    <img v–if=“https://recipe.kc-cloud.jp/archives/18997/imageURL” :src=“https://recipe.kc-cloud.jp/archives/18997/imageURL” alt=“クリップボードの画像” style=“max-width: 200px; height: auto;”>

    <p v–if=“successMessage”>{{ successMessage }}</p>

    <p v–if=“imageUrl”>{{ imageUrl }}</p>

    <button @click=“copyImageUrlToClipboard” v–if=“imageUrl”>画像リンクをコピー</button>

  </div>

</template>

 

<script>

export default {

  data() {

    return {

      imageURL: null,

      successMessage: ”,

      imageUrl: ”,

    };

  },

  methods: {

    async captureScreenshot() {

      try {

        const clipboardItems = await navigator.clipboard.read();

        for (const clipboardItem of clipboardItems) {

          if (clipboardItem.types.includes(‘image/png’)) {

            const blob = await clipboardItem.getType(‘image/png’);

            const reader = new FileReader();

 

            reader.onloadend = () => {

              const image_data_base64 = reader.result.split(‘,’)[1];

              this.imageURL = ‘data:image/png;base64,’ + image_data_base64;

 

              // Lambda関数のエンドポイントURLを設定

              const lambda_endpoint_url = ‘https://xxxx.lambda-url.ap-northeast-1.on.aws/’;

 

              // Lambda関数に渡すデータ

              const lambda_data = {

                ‘imageData’: image_data_base64,

              };

 

              const apiKey = process.env.VUE_APP_API_KEY;

              // Lambda関数にHTTP POSTリクエストを送信

              fetch(lambda_endpoint_url, {

                method: ‘POST’,

                headers: {

                  ‘Content-Type’: ‘application/json’,

                  ‘x-api-key’: apiKey

                },

                body: JSON.stringify(lambda_data),

              })

                .then((response) => {

                  if (response.status === 200) {

                    return response.json();

                  } else {

                    throw new Error(`HTTPリクエストエラー: ステータスコード ${response.status}`);

                  }

                })

                .then((responseData) => {

                  console.log(‘Lambdaからのレスポンス:’, responseData);

                  this.successMessage = ‘画像がアップロードされました。’;

                  this.imageUrl = responseData.message;

                })

                .catch((error) => {

                  console.error(‘エラー:’, error);

                  this.successMessage = ‘画像のアップロードに失敗しました。’;

                });

            };

 

            reader.readAsDataURL(blob);

          }

        }

      } catch (error) {

        console.error(‘クリップボードからの画像取得エラー’, error);

        this.successMessage = ‘画像のアップロードに失敗しました。’;

      }

    },

    copyImageUrlToClipboard() {

      // imageUrlをクリップボードにコピーする処理を実装

      const textArea = document.createElement(“textarea”);

      textArea.value = this.imageUrl;

      document.body.appendChild(textArea);

      textArea.select();

      document.execCommand(‘copy’);

      document.body.removeChild(textArea);

    },

  },

};

</script>