ctrl + v 实现图片预览和上传

前言：
本功能只能上传剪切板中的图片。这种情况下剪切板数据来源一般是两种：

• 使用 QQ 等其他截图工具截屏的时候，剪切板中是有截屏图片的；
• 任意网页中的图片上“右键-复制图片”，也是在剪切板中。

但是操作系统的文件夹中复制图片，这个图片并不是在剪切板中，无法 ctrl+v 上传。

这是个可能会让人困扰的地方。在windows文件夹系统中，我们复制文本类的东西，是在剪切板中，我们可以获得之；但是，复制的图片文件，不论是右键复制，还是Ctrl + C复制都不行。我曾经尝试找过“右键-复制到剪切板”这样的小工具，以便提高我们后台编辑人员的工作效率，失败了，如果谁知道有这样的工具，欢迎指教。
参考：直接剪切板粘贴上传图片的前端JS实现

js粘贴截图

一、剪切板的图片粘贴到浏览器

使用的 fastStone capture 截图软件，截完图从截图软件的编辑器里面复制图片到剪切板，直接在浏览器的指定位置 ctrl+v 粘贴图片。如下图：

gitCam.exe 的默认命名就不能用时间命名吗，老是默认GIF.gif

源代码实现：

    
    


    

        
请截图并复制我
    
    

var f = e.clipboardData.files[0]; 可以直接拿到图片地址。和通过e.clipboardData.items[i].getAsFile(); 拿到的地址相同，都可以直接转化成 base64 位的图片进行预览。

思考？讲到这里我们平常写文章的 Markdown 编辑器，例如直接 ctrl+v 上传图片编辑器里面就会显示! [title](url) ，现在对这个功能实现是不是有思路了。

二、copy 与剪切板

很多情况下我们在复制东西的时候，例如博客上的代码或文本总是会出现：

作者：xxxx
链接：xxxxx
来源：xx
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

这个好恶心的东西是怎么回事？很简单就是一个 copy 事件，当我们在复制文章内容的时候，copy 事件自动在剪切板文字后面加上一段版权声明。让我们来全局监听这个事件：

document.addEventListener('copy', function (event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (!clipboardData) { return; }
    var text = window.getSelection().toString();
    console.log(window.getSelection().toString())
    if (text) {
        // 必须阻止掉默认事件，否则不起作用。
        event.preventDefault();
        clipboardData.setData('text/plain', text + '\n\n作者：xxxx\n链接：xxxxx\n来源：xx\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。');
    }
});

除此之外还有个常见的业务就是禁止你复制网页的页内容提示你开通 VIP ，才能自由复制，恶心吧。看案例：

document.addEventListener('copy', function (event) {
    alert("请开通VIP，才能复制本网站的内容！");
    event.preventDefault();
});

别忘了阻止复制的默认事件。除非开通VIP。