JS实现复制粘贴图片

最近在开发公司的可视化编辑器应用, 同事们提了一个需求, 即可以直接复制图片到编辑器中粘贴, 生成对应的图片组件.

因为传统的点击上传太麻烦, 得先把图片保存到本地, 然后再回到编辑器点击上传, 选择图片. 流程太长了, 如果可以直接复制粘贴图片, 速度会更快, 体验也更好一些.

对于使用Figma之类设计工具的同学, 这几乎是强需求, 作为致力于开发最好用的可视化编辑器, 这个需求必须要满足.

然后就顺带研究了一下, 发现其实并不复杂, 我在codepen里面做了一个简单的demo, 可以点击体验:
copy-paste-image

大致的逻辑是:

1. 监听paste事件, 在event对象中读取 clipboardData中的元素
2. 判断元素是否是图片, 如果是图片的话, 获取blob值, 然后转成文件或者url使用.

核心代码如下:

document.addEventListener('paste', function(event) {
    const items = event.clipboardData.items;
    
    for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
            const blob = items[i].getAsFile();
            const url = URL.createObjectURL(blob);
            imagePreview.src = url;
            imagePreview.style.display = 'block';
            pasteArea.textContent = '图片已粘贴，点击这里可以粘贴新图片';
            return;
        }
    }
    
    pasteArea.textContent = '剪贴板中没有图片，请复制一张图片后再尝试';
});