最近写博客需要插入一些截图，想着用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. k8s全方位监控 -prometheus实现短信告警接口编写（python）

    1.prometheus短信告警接口实现(python)源码如下: import subprocess from flask import Flask from flask import reques ...

  2. 民间流转的pytest项目结构设计

    创建上图的pytest项目结构,只需要一条命令即可: tep startproject demo 前提是安装tep0.9.8版本: pip install tep==0.9.8 示例代码单独放在了sa ...

  3. 【Java分享客栈】一个包装过简历的新同事写完微信支付引起事故后果断离职了

    前言 挺长时间没发文了,因为公司有一个紧急项目要赶进度,加班如吃饭喝水,久违的进入到码农的状态. 之所以抽空来发个文,是这个项目才刚上线,时间不长却因为一位新同事的代码引起了生产环境的事故,造成了一批 ...

  4. Linux-系统的延时和定时

    1.系统的延时任务 at 时间 时间后回车 就可以进入编辑了 完成后按ctrl+d提交 at 09:46 #设定任务的执行时间 at> touch /mnt/file{1..9} #任务的动作 ...

  5. tp 实现定时任务

    这里我是用tp6进行测试的:适合做本地项目 博客参考:: https://www.thinkphp.cn/topic/64455.html 1:composer  安装workman插件 compos ...

  6. tp5怎么防sql注入 xss跨站脚本攻击

    在 application/config.php 中有个配置选项 框架默认没有设置任何过滤规则,你可以是配置文件中设置全局的过滤规则 则会调用这些函数 自动过滤 // 默认全局过滤方法 用逗号分隔多个 ...

  7. php 23种设计模式 - 责任链模式

    责任链模式 责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行 ...

  8. Vmware安装Ubuntu16.4的过程及出现问题的解决

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 1.下载Ubuntu镜像文件 Ubuntu16.4镜像文件下载地址:https://mirrors.aliyun.com/ubuntu-relea ...

  9. 冒泡排序和鸡尾酒排序(code)

    昨天回顾了下冒泡排序和鸡尾酒排序,用面向对象的方式写了一下,并且优化了代码,记录一下~ 一.冒泡排序 # 冒泡排序 class BubbleSort(object): def __init__(sel ...

  10. http请求中的三种参数类型

    1.URL参数:实际就是querry string的方式,参数拼接在url之后以?隔开,参数之间以&连接. 优点:简单,页面跳转比较快. 缺点:1.基于浏览器对urk长度有限制,不能超过204 ...