JS实现复制粘贴图片
最近在开发公司的可视化编辑器应用, 同事们提了一个需求, 即可以直接复制图片到编辑器中粘贴, 生成对应的图片组件.
因为传统的点击上传太麻烦, 得先把图片保存到本地, 然后再回到编辑器点击上传, 选择图片. 流程太长了, 如果可以直接复制粘贴图片, 速度会更快, 体验也更好一些.
对于使用Figma之类设计工具的同学, 这几乎是强需求, 作为致力于开发最好用的可视化编辑器, 这个需求必须要满足.
然后就顺带研究了一下, 发现其实并不复杂, 我在codepen里面做了一个简单的demo, 可以点击体验:
copy-paste-image
大致的逻辑是:
- 监听paste事件, 在event对象中读取 clipboardData中的元素
- 判断元素是否是图片, 如果是图片的话, 获取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 = '剪贴板中没有图片,请复制一张图片后再尝试';
});