一种js复制图片的实现方式

20 阅读1分钟

业务要求,一个二维码图片,点击一个按钮复制。粘贴时粘贴一个图片出来而不是一个链接

    const onCopy = async (url: string) => {
        // url为线上图片链接

        const response = await fetch(url);
        // 确保请求成功  
        if (!response.ok) {
            throw new Error('Image fetch failed');
        }
        // 将响应体读取为Blob  
        const blob = await response.blob();

        const { type } = blob
        // 创建一个ClipboardItem对象,其中包含一个图像项  
        const item = new ClipboardItem({
            [type]: blob 
        });

        // 使用navigator.clipboard.write方法将ClipboardItem写入剪贴板  
        try {
            await navigator.clipboard.write([item]);
            message.success('复制成功~')
        } catch (err) {
            message.warning('复制失败~')
        }
    }

navigator.clipboard.write方法有一些限制,它需要https安全上下文。非安全情况下会强制用户主动同意。 因为内部后台项目,兼容性上也还可以。没有过多研究。