最近写博客需要插入一些截图，想着用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. html实现随机验证码

    代码: <!DOCTYPE html> <html> <!-- head --> <head> <title>图片登录验证</titl ...

  2. burpsuite中文乱码问题

    无法显示中文 先查看网页编码 然后在修改编码为网页的编码一致并重启burpsuite即可(或者直接选第一项自动识别编码) 显示中文正常,但是无法匹配中文 找到了一处验证码漏洞,想用burpsuite的 ...

  3. 创建vue脚手架步骤

    一.在cmd配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org 二.仅第一次执行安装,安装好后关掉cmd后再开,这个时候 ...

  4. GO语言基础（结构+语法+类型+变量）

    GO语言基础(结构+语法+类型+变量) Go语言结构 Go语言语法 Go语言类型 Go语言变量       Go 语言结构 Go 语言的基础组成有以下几个部分: 包声明 引入包 函数 变量 语句 &a ...

  5. R-CNN小结

    1.背景 物体检测(object detection)是计算机视觉非常重要的一个领域.RCNN作为该领域的开山鼻祖,在深度学习出现之前,传统方法始终无法处理好物体检测问题(会通过非常庞大的计算,来算出 ...

  6. Android12 新特性及适配指南

    Android 12(API 31)于2021年10月4日正式发布,正式版源代码也于当日被推送到AOSP Android开源项目.截止到笔者撰写这篇文章时,国内各终端厂商的在售Android设备,已经 ...

  7. Java8 中的流式数据处理

    java8的流式处理极大了简化我们对于集合.数组等结构的操作,让我们可以以函数式的思想去操作,本篇文章将探讨java8的流式数据处理的基本使用. 一. 流式处理简介 在我接触到java8流式处理的时候 ...

  8. 微服务8：通信之RPC实践篇（附源码）

    ★微服务系列 微服务1:微服务及其演进史 微服务2:微服务全景架构 微服务3:微服务拆分策略 微服务4:服务注册与发现 微服务5:服务注册与发现(实践篇) 微服务6:通信之网关 微服务7:通信之RPC ...

  9. contos 配置国内yum源

    contos配置国内yum源 前言 rpm管理软件包的命令,很难用,需要手动解决以来关系,所以最好用 yum 的理念是使用一个中心仓库(repository)管理一部分甚至一个distribution ...

  10. RabbitMQ Go客户端教程6——RPC

    本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第六篇--RPC. 这些教程涵盖了使用RabbitMQ创建消息传递应用 ...