Vue3+ts复制图片到剪贴板

直接看代码 ：

我的图片地扯（imageUrl）为 https://placehold.co/150x200

// 新增: 复制图片功能
const copyImageToClipboard = async () => {const imageUrl = productData.value.imageUrl;if (!imageUrl) {ElMessage.warning('没有可用的图片链接');return;}try {const response = await fetch(imageUrl);if (!response.ok) throw new Error(`HTTP错误! 状态: ${response.status}`);const blob = await response.blob();const contentType = blob.type;// 如果是 SVG，先转换成 PNGif (contentType.includes('svg')) {await convertSvgToPngAndCopy(imageUrl);return;}// 否则直接复制const item = new ClipboardItem({ [contentType]: blob });await navigator.clipboard.write([item]);ElMessage.success('图片已复制到剪贴板');} catch (error) {console.error('复制图片失败:', error);ElMessage.error('复制失败: ' + error.message);}
};// SVG → PNG 转换
const convertSvgToPngAndCopy = async (svgUrl) => {const img = new Image();img.crossOrigin = 'Anonymous'; // 允许跨域img.src = svgUrl;await new Promise((resolve) => (img.onload = resolve));const canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;const ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0);// 转换为 PNG Blobcanvas.toBlob(async (pngBlob) => {const item = new ClipboardItem({ 'image/png': pngBlob });await navigator.clipboard.write([item]);ElMessage.success('图片已复制到剪贴板');}, 'image/png');
};