浏览器的剪贴板API write 方法目前只支持 text/plain 和 text/html MIME 类型,浏览器支持PNG而不支持JPEG
export const copyImageToClipboard = async (imageUrl) => {
fetch(imageUrl)
.then((response) => {
if (response.ok) {
return response.blob();
}
})
.then((blob) => {
return new Promise((resolve, reject) => {
const img = document.createElement('img');
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
canvas.toBlob(resolve, 'image/png');
};
img.onerror = reject;
img.src = URL.createObjectURL(blob);
});
})
.then((pngBlob) => {
const data = [new ClipboardItem({ [pngBlob.type]: pngBlob })];
return navigator.clipboard.write(data);
})
.then(() => {
console.log('Image copied to clipboard successfully');
})
.catch((error) => {
console.error('Error:', error);
});
};