最近写博客需要插入一些截图，想着用DataURL会方便点，于是需要一个把图片转成DataURL的工具。搜索一番后发现这个功能用HTML就能实现，通过paste事件。

先尝试在Chrome上实现，Chrome版本 43.0

html<!DOCTYPE html>

<html>

<head></head>

<body>

    <textarea id="result" style="width:800px; height:600px; resize:none"></textarea>

    <script>

        var body = document.getElementsByTagName('body')[0];

        body.addEventListener('paste', function(e){

            var clipboard = e.clipboardData;

            var type = clipboard.items[0].type;

            if (type.match(/image/)) {

                var blob = clipboard.items[0].getAsFile();

                var file = new FileReader();

                file.addEventListener('loadend', function(e){

                    document.getElementById('result').value = e.target.result;

                });

                file.readAsDataURL(blob);

            } else {

                document.getElementById('result').value = "not an image\ntype: " + type + "\n\n";

            }

        });

    </script>

</body>

</html>

给body添加一个paste事件，会在粘贴时触发，粘贴有关的信息都会随着e传入回调函数。e是一个ClipboardEvent，获取它的clipboardData，就可以通过一系列操作取出数据。

首先检查一下粘贴数据的类型，如果是图片则取出Blob对象，再用FileReader去读取，结果就是DataURL了。

如果不是图片，直接打印提示信息。

粘贴一段文本的效果：

这里需要注意的是，paste是在粘贴前触发的，所以文本会在提示信息打印后被粘贴到文本框里（粘贴的默认行为）。如果需要取消这种默认行为，可以用 e.preventDefault() 。

Chrome的代码在IE上完全无法工作，然后我找到了一个微软IE的粘贴图片的演示。

这个演示很有意思，IE可以直接在“编辑器”里粘贴图片，而且这是由浏览器支持的，甚至不需要Javascript。

给div设置一个contenteditable属性之后，这个div就可以被任意编辑，在其中粘贴的图片会自动通过img标签显示，它的src就是我们要的DataURL，直接获取就可以了。

这个演示需要IE11（Edge），以下我写的也一样。

html<!DOCTYPE html>

<html>

    <body>

        <textarea id="result" style="width:800px; height:600px; resize:none"></textarea>

        <div id="editor" contenteditable="true" style="border:1px solid #ccc">

            paste here

        </div>

    </body>

    <script>

        var editor = document.getElementById('editor');

        editor.addEventListener('paste', function(e){

            console.log(e);

            setTimeout("updateDivContent()", 0);

        });

        function updateDivContent(){

            for (var i=0;i<editor.childNodes.length;i++) {

                var node = editor.childNodes[i];

                if(node.nodeName == "IMG"){

                    result = node.src;

                }

            }

            for (var i=0;i<editor.childNodes.length;i++) {

                editor.removeChild(editor.childNodes[i]);

            }

            document.getElementById('result').value = result;

        }

    </script>

</html>

这里传给paste回调的e实际上是个DragEvent，不过它没有包含粘贴的数据（dataTransfer是null），所以并没有什么用。

如果在回调里获取不到粘贴的数据，我们便需要在粘贴结束后，再去获取div里的img标签，因为粘贴的行为是在回调之后执行的。

这里我通过setTimeout实现在粘贴后执行函数，这种做法看上去很不靠谱（我不知道），不过微软那个例子里也有类似的写法。

在updateDivContent里，先获取img的src，然后清空div，再设置textarea来显示DataURL。

实际上呢IE这个例子有点舍本逐末的感觉，既然浏览器支持这样的特性，可以把div直接做成一个编辑器，这样就更方便了。

最后有一个疑问是，微软的例子里的Blob String到底是什么机制？看上去是把图片保存到了本地的某个位置，再用那一串字符串去索引？

使用Javascript获取剪贴板图片的DataURL的更多相关文章

  1. CEF JS实现获取剪贴板图片的DataURL

    转载:https://www.deanhan.cn/js-paste-upload.html 转载:https://segmentfault.com/a/1190000002915597 转载:htt ...

  2. 关于前端使用JavaScript获取base64图片大小的方法

    base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字 ...

  3. JS获取剪贴板图片之后的格式选择与压缩问题

    前言 某年某月的某一天,突然发现博客服务器上上传的图片都比较大,一些很小的截图都有几百kb,本来服务器带宽就慢,不优化一下说不过去. 问题细述 特别说明:本文代码因为只是用于我自己后台写markdow ...

  4. javascript 获取图片原始尺寸

    javascript 获取图片原始尺寸 function getImgInfo(url){ var img = new Image(), loaded = false; var info = {}; ...

  5. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

  6. Atitit.获取验证码图片通过web

    Atitit.获取验证码图片通过web 1. WebRequest进行较为底层的访问(不推荐) 1 2. WebBrowser截图 1 3. 剪贴板复制法Clipboard(推荐) 1 4. C# 取 ...

  7. JavaScript读取剪贴板中的表格生成图片

    原文 JavaScript读取剪贴板中的表格生成图片 演示地址 你可以访问下面的地址体验每个demo https://fairyever.github.io/excel-to-image-demo/ ...

  8. JavaScript鼠标经过图片的放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 用Delphi直接获取bmp图片的像素

    用Delphi直接获取bmp图片的像素,并存储显示出.(此像素主要用在LED上显示).希望高手能给出代码啊!! function getImagePixels(f: string): Integer; ...

随机推荐

  1. xsd文件生成cs文件命令

    C:\Windows\System32>xsd.exe c:/Createst.xsd -c C:\Windows\System32>xsd.exe c:/Creauest.xsd /c ...

  2. anaconda及jupyter notebook的使用之numpy模块的用法（2）

    今日内容概要 numpy模块结束 ndarray创建 numpy内置方法 索引与切片(花式索引.布尔索引) 常用函数 统计方法 随机数 numpy的内置方法 import numpy as np 1. ...

  3. netty系列之:EventLoop,EventLoopGroup和netty的默认实现

    目录 简介 EventLoopGroup和EventLoop EventLoopGroup在netty中的默认实现 EventLoop在netty中的默认实现 总结 简介 在netty中不管是服务器端 ...

  4. 【计题04组01号】Java面试问答题

    写作前面 本书内容摘自<Java程序员面试笔试宝典> 很多同学在面试时其实有个误区,认为准备的东西越详细越好 其实不是,就和批试卷一样,写长篇大论其实并不会必然加分 老师阅卷时间有限只会抓 ...

  5. C#控制打印机打印

    一.引用BarcodeStandard.dll #region BarcodeStandard.dll /* * * 使用说明 需要通过NuGet进行安装BarcodeLib.dll,必不可少 */ ...

  6. MySQL [ERROR] [MY-013183]

    [ERROR] [MY-013183] [InnoDB] Assertion failure,回顾记录一次因数据库(MySql 8.0)操作不当导致的生产事故顺便记录下正常重启发生的意外和解决方法(关 ...

  7. Maven插件mybatis-generator，如何让生成的PO类的field上有对应表字段的注释

    前言 去年刚入职的时候,我就发现,po类(和数据库表对应的类)上,一片都是光秃秃的,什么注释都没有,类上没注释,field上也没注释. 在以前的项目中,其实我们都是有生成注释的,比如,对于下面这个表: ...

  8. think php 上下架修改+jq静态批量删除+ajax删除+全选

    视图代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  9. LGP3709题解

    题目大意 简化后为区间众数出现次数,简化前为[数据删除] 吐槽 为什么题解只有一篇分块,剩下的全是莫队? 这题不是蒲公英?这和算导例题有何区别??? 为什么现在的人都喜欢去看题解而不注重思维??? 莫 ...

  10. 【工程应用五】 opencv中linemod模板匹配算法诸多疑惑和自我解读。

    研究这个前前后后也有快两三个月了,因为之前也一直在弄模板匹配方面的东西,所以偶尔还是有不少朋友咨询或者问你有没有研究过linemod这个算法啊,那个效率啥的还不错啊,有段时间一直不以为然,觉得我现在用 ...