最近写博客需要插入一些截图，想着用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. python中的流程控制

    目录 引言 流程控制的分类 分支结构 单if结构 if与else结构 if与elif与else结构 if分支的嵌套 循环结构 while循环 while + break循环 while + conti ...

  2. 超好用的Markdown编辑器Typora中的常见语法

    目录 下载网址 安装 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.语法环境 三.单选 四.字体 五.分割符 六.列表 七.图片引入 八.表格 九.超链接 下载网址 正版中 ...

  3. while + else 使用，while死循环与while的嵌套，for循环基本使用，range关键字，for的循环补充(break、continue、else) ，for循环的嵌套，基本数据类型及内置方法

    今日内容 内容概要 while + else 使用 while死循环与while的嵌套 for循环基本使用 range关键字 for的循环补充(break.continue.else) for循环的嵌 ...

  4. DFT/FFT/NTT

    在Seal库和HElib库中都用到了NTT技术,用于加快多项式计算,而NTT又是FFT的优化,FFT又来自于DFT,现在具体学习一下这三个技术! 基础概念 名词区分 1.DFT:离散傅立叶变换 2.F ...

  5. 自动化安装操作系统（Centos7+PXE+Cobbler+kickstart)

    一.简介 PXE称作是一种引导方式而不是安装方式似乎更加准确,PXE(Pre-boot Execution Environment)是由Intel设计的协议,它可以使计算机通过网络启动,但是有一个前提 ...

  6. laravel7 webuploader上传图片

    webuploader上传 前提工作: 1>了解 代码如下:1.app_path() app_path函数返回app目录的绝对路径: $path = app_path(); 你还可以使用app_ ...

  7. OSPF协议原理及配置5-LSA分析

    OSPF协议原理及配置5-LSA分析   前面,已经介绍了邻接关系的建立和LSDB的同步.通过同步过程的介绍,我们可以了解LSDB的同步是通过交互LSA实现的. 不同角色的路由器发出的LSA的内容是不 ...

  8. VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1  列表中增加和删除元素 <style> .my-ite ...

  9. 一致性 Hash 在负载均衡中的应用

    介 一致性Hash是一种特殊的Hash算法,由于其均衡性.持久性的映射特点,被广泛的应用于负载均衡领域,如nginx和memcached都采用了一致性Hash来作为集群负载均衡的方案.本文将介绍一致性 ...

  10. 6月4日 python学习总结 装饰器复习

    1.  装饰器的原理以及为什么要使用装饰器 在代码运行期间动态增加功能的方式,称之为"装饰器"(Decorator). 在不影响原代码结构的情况下为其添加功能 2.  装饰器的基本 ...