最近写博客需要插入一些截图，想着用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. spring项目获取ApplicationContext（能手动从Spring获取所需要的bean）

    最流行的方法就是  实现ApplicationContextAware接口 @Component public class SpringContextUtil implements Applicati ...

  2. Goland的GC回收机制

    Goland的GC回收机制 GC触发的条件 阈值:默认内存扩大一倍,启动gc 定期:默认2min触发一次gc,src/runtime/proc.go:forcegcperiod 手动:runtime. ...

  3. HarmonyOS小白入门设备开发的“芯”路历程

    HarmonyOS Connect设备开发,相信不少刚入门的开发者都被这些问题所困扰,面对五花八门的开发板不知道该怎么选取?芯片.模组.开发板傻傻分不清?如何使用代码控制开发板? 本期,我们将一一为你 ...

  4. 二进制部署1.23.4版本k8s集群-6-部署Node节点服务

    本例中Master节点和Node节点部署在同一台主机上. 1 部署kubelet 1.1 集群规划 主机名 角色 IP CFZX55-21.host.com kubelet 10.211.55.21 ...

  5. Java运算符 算术运算法

    运算符 算术运算法:+,-,*,/,%,++,– 复制运算符:= 关系运算符:>,<,>=,<=,==,!= instanceof 逻辑运算符:&&,||,! ...

  6. vue 通信：父子通信、兄弟通信、跨多层通信、vuex状态管理

    之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...

  7. 商品模型：SPU、商品、SKU概念模型设计

    商品系统是电商SaaS.新零售SaaS最基础.最核心的系统之一.商品系统几乎需要支撑所有业务系统,商品详情.购物车.订单.履约.结算.售后.库存.供应链等,都需要依赖商品系统的能力.为了保障业务的稳定 ...

  8. 【Vulnhub靶场】RED: 1

    环境准备 下载靶机导入到vmware 但是获取不到地址,可以根据我博客里的方法修改网卡来获取IP地址 信息收集 我们改好网卡之后,我们使用arp-scan命令来探测靶机的IP地址 靶机IP地址为:19 ...

  9. @Autowired @Qualifier @Resource

    @Autowired 用于对Bean的属性变量,属性的setter()方法及构造方法进行标注,配合对应的注解处理器完成Bean的自动装配工作.默认按照Bean的类型进行装配. @Resource 其作 ...

  10. 如何用系统命令sc修改系统服务

    系统服务是系统的一项重要组成部分,sc命令在特定权限下,可以实现对指定服务的启动项.配置文件及状态进行修改,位置在c:\windows\system32\目录下面,下面就和大家分享一下如何用系统命令s ...