vue3 nuxt 图片点击后保存在剪贴板

在项目上实现二维码功能，产品要求二维码图片在点击后能复制到剪贴板中

html代码

 <vue-qrcode ref="qrcode" v-if="registerLink + `?id=` + scope.row.id" :value="registerLink + `?id=` + scope.row.id"
    :width="100" class="qrcode" @click="copyImage">
  </vue-qrcode>

js代码

  // 二维码对象
const qrcode = ref<any>()

// 复制二维码
const copyImage = async () => {
        // 确保二维码已经渲染
	await nextTick() 

	const imgElement = qrcode.value.$el // 获取 img 标签
	const canvas = document.createElement('canvas')
	const ctx: any = canvas.getContext('2d')

	// 设置 canvas 尺寸
	canvas.width = imgElement.width
	canvas.height = imgElement.height

	// 将 img 绘制到 canvas
	ctx.drawImage(imgElement, 0, 0)

	// 将 canvas 内容转换为 Blob
	canvas.toBlob(async blob => {
		if (!blob) {
			console.error('Failed to create blob from canvas')
			return
		}

		// 检查 Clipboard API 是否可用
		if (navigator.clipboard && navigator.clipboard.write) {
			try {
				const clipboardItem = new ClipboardItem({
					'image/png': blob,
				})
				await navigator.clipboard.write([clipboardItem])
				ElMessage({
					message: '图片已复制到剪贴板',
					type: 'success',
				})
			} catch (error) {
				ElMessage({
					message: '图片复制失败',
					type: 'error',
				})
			}
		} else {
			console.error('Clipboard API 不可用')
			// 非https环境 ， 提示用户手动复制
			ElMessage({
				message: '非http环境，请手动鼠标右键选择图片复制',
				type: 'error',
			})
		}
	}, 'image/png')
}

注意

navigator.clipboard 只能在https的协议下才能使用，本地默认开启http，nuxt框架需要在nuxt.config.ts中配置开启https

	// 开启ip访问功能
	devServer: {
		host: '10.0.0.0',
		port: 3000,
		https: true,
	},