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>
