ImageClipboard js粘贴剪切板图片，已测试，可用，可获得base64

具体用到自己项目的时候，拿源码改成自己的库，从写一遍

3个小问题

  1. onpaste 执行了两遍，一次是图片加载完成，一次是加载图片之前。按说 应该搞两个事件来分别调用
  2. pasteCatcher 应该是作为一个保底实现，我也没看明白是怎么获取剪切板的图片，怎么就能拿到base64了，反正通过e.clipboardData.items是拿到图片了
  3. 大哥遍历了整个剪切板的图片，全部走了一遍函数，这性能会不会有点问题，也不知道。

结论

不管怎么说，这个代码能用，别的库，好多都不能用。

index.html

<!DOCTYPE html>

<html>

<head>

  <!-- https://github.com/jorgenbs/ImageClipboard/tree/master -->

  <script src="ImageClipboard.js"></script>

</head>

<body>

  <div id="box">

  </div>

<script type="text/javascript">

  var clipboard = new ImageClipboard('#box');

  //onpaste-callback can also be passed as second argument

  //in the constructor above.

  clipboard.onpaste = function (base64) {

    //do stuff with the pasted image

    console.info('clipboard.onpaste')

  };

  //you can also pass in single DOM-element instead of

  //query as the first parameter.

</script>

</body>

</html>

ImageClipboard.js

/*jshint boss:true, laxcomma: true, expr: true*/

!function (name, definition) {

  if (typeof module != 'undefined') module.exports = definition;

  else if (typeof define == 'function' && define.amd) define(name, definition);

  else this[name] = definition;

}('ImageClipboard', function (selector, callback) {

  'use strict';

  var self = typeof this === 'object' ? this : {};

  self.el = null;

  self.pasteCatcher = null;

  self.clipImage = null;

  self.onpaste = null;

  self.browserSupport = true;

  self.init = function (selector, callback) {

      if (typeof selector === "string") {

          self.el = document.querySelector(selector);

      }

      else if (_isElement(selector)) self.el = selector;

      else return false;

      self.pasteCatcher = null;

      self.clipImage = null;

      self.onpaste = typeof callback === 'function' ? callback : function () { };

      //pasting not supported, make workaround

      if (!window.Clipboard) {

          self.pasteCatcher = _makePasteCatcher();

      }

      window.addEventListener('paste', self.pasteHandler);

      return self;

  };

  self.pasteHandler = function (e) {

      var items;

      if (e.clipboardData && e.clipboardData.items) {

          items = e.clipboardData.items;

          if (items) {

              items = Array.prototype.filter.call(items, function (element) {

                  return element.type.indexOf("image") >= 0;

              });

              console.info('items.length', items.length)

              Array.prototype.forEach.call(items, function (item) {

                  var blob = item.getAsFile();

                  var rdr = new FileReader();

                  rdr.onloadend = function () {

                      _loadImage(rdr.result);

                  };

                  rdr.readAsDataURL(blob);

              });

          }

      }

      else if (self.pasteCatcher) {

          //no direct access to clipboardData (firefox)

          //use the pastecatcher

          setTimeout(function () {

              var child = self.pasteCatcher.firstElementChild;

              if (child && child.tagName == "IMG") {

                  _loadImage(child.src);

              }

          }, 5);

      }

  };

  function _makePasteCatcher() {

      var pasteBox = document.createElement("div");

      pasteBox.setAttribute("id", "paste_catcher");

      pasteBox.setAttribute("contenteditable", "");

      pasteBox.style.opacity = 0;

      document.body.insertBefore(pasteBox, document.body.firstChild);

      pasteBox.focus();

      self.el.addEventListener("click", function () { pasteBox.focus(); });

      return pasteBox;

  }

  function _loadImage(source) {

      var img = new Image();

      self.el.innerHTML = "";

      img.onload = function () {

          //got picture, display it

          var imgContainer = document.createElement("img");

          imgContainer.src = img.src;

          imgContainer.style.maxHeight = "100%";

          imgContainer.style.maxHeight = "100%";

          self.el.appendChild(imgContainer);

          //empty out the ol' pastecatcher

          if (self.pasteCatcher) self.pasteCatcher.innerHTML = "";

          self.clipImage = img;

          if (typeof self.onpaste === 'function')

              self.onpaste(img.src);

      };

      img.src = source;

      self.onpaste.call(self, source.split(",")[1]); //callback(base64, file-type)

  }

  function _isElement(obj) {

      return typeof HTMLElement === "object" ? obj instanceof HTMLElement :

        obj && typeof obj === "object" && obj.nodeType === 1 && typeof obj.nodeName === "string";

  }

  return self.init(selector, callback);

});

ImageClipboard js粘贴剪切板图片，已测试，可用，可获得base64的更多相关文章

  1. JS访问剪切板中的图片

    google出来一个html2canvas,它利用canvas来渲染读取的DOM树,也就是说它只能截取document里的内容,如果要像qq截图那样,应该怎么做?用过百度的Ueditor编辑器的朋友都 ...

  2. 经验分享：计算机 web 浏览器——访问剪切板图片

      有时候,我们希望能访问用户的剪切板,来实现一些方便用户的功能:但是另一方面,剪切板里的数据对用户来说又是非常隐私的,所以浏览器在获取信息方面有安全限制,同时也提供访问接口. 当我们需要实现在富文本 ...

  3. JS从剪切板里粘贴图片

    功能需求:在网页中,Ctrl+V,把系统剪切板的图片(比如QQ截图)进行粘贴.显示.上传...,提高用户体验. 参考链接:https://ruby-china.org/topics/17266 git ...

  4. js修改剪切板内容的方法

    代码如下: //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy事件. $(document.body).bind({ copy: function(e) {//copy ...

  5. js 操作剪切板

    1.IE浏览器 window.clipboardData: setData() //设置值 getData()//获取值 clearData()//删除值 /******* ** IE 浏览器下支持w ...

  6. JS实现剪切板添加网站版权、来源

    公司官网有这样需求,写好后,备份以后留用. 只兼容chrome.firefox.IE9+等主流浏览器. // https://developer.mozilla.org/en-US/docs/Web/ ...

  7. js操作cookie(转载：经测试可用)

    /***js操作cookie,star***/ function addCookie(objName,objValue,objsec){//添加cookie  var str = objName + ...

  8. win7下virtualbox装linux共享win7文件问题(已测试可用)

    virtualbox这个比较强大,在win7上跑redhat5u4很流畅.os之间共享文件是个大家都很关心的问题,这会直接关系到虚拟机用的爽不爽. 在win7和其上的虚拟机linux之间共享文件也很容 ...

  9. 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件

    [源码下载] 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件 作者:webabcd 介绍重新想象 Windows 8 Store ...

  10. Javascript操作剪切板数据（支持IE、Chrome、360、搜狗），亲测！

    clipboarddata只能在IE浏览器中使用,在chrome下会提示对象未定义!以下的方法支持IE.Chrome.360.搜狗等浏览器,其它浏览器还未验证. <!DOCTYPE html&g ...

随机推荐

  1. 从零开始的知识图谱生活，构建一个百科知识图谱，完成基于Deepdive的知识抽取、基于ES的简单语义搜索、基于 REfO 的简单KBQA

    从零开始的知识图谱生活,构建一个百科知识图谱,完成基于Deepdive的知识抽取.基于ES的简单语义搜索.基于 REfO 的简单KBQA 个人入门知识图谱过程中的学习笔记,算是半教程类的,指引初学者对 ...

  2. CF526F Pudding Monsters 题解

    题目链接:CF 或者 洛谷 析合树真是连续段问题的降智神器 先看下题目的一些特殊性,每行每列恰好有一个棋子.考虑特殊性,\(n \times n\) 的棋盘,那么就该判断是否有 \(n\) 个棋子,容 ...

  3. 深入浅出Java多线程(九)：synchronized与锁

    引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第九篇内容:synchronized与锁.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在现代软件开发中,多 ...

  4. 3.操作列表--《Python编程：从入门到实践》

    3.1 遍历列表 magicians = ['alice', 'david', 'carolina'] for magician in magicians: # 临时变量 magician print ...

  5. Linux Shell 字符串截取方法

    Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.aaa.com/123.htm. 1. # 号截取,删除左边字符,保留右边字符. 代码如下: echo ${va ...

  6. 点亮.NET的文字云艺术之光——Sdcb.WordCloud 2.0

    点亮.NET的文字云艺术之光--Sdcb.WordCloud 2.0 作为一名.NET开发者,你是否渴望拥有一个强大且易用的库,用以在你的应用程序中创造美轮美奂的文字云?我在经过一轮农历新年前的码力全 ...

  7. .NET应用程序7种最常见的性能问题及其解决方案

    译者注:这篇文章依然是介绍.NET Framework框架下的性能问题排查,可能并不直接适用于.NET Core,但有时也能提供一些参考.   .NET应用程序7种最常见的性能问题及其解决方案 原文地 ...

  8. Pandas日期时间格式化

    当进行数据分析时,我们会遇到很多带有日期.时间格式的数据集,在处理这些数据集时,可能会遇到日期格式不统一的问题,此时就需要对日期时间做统一的格式化处理.比如"Wednesday, June ...

  9. JS Leetcode 80. 删除有序数组中的重复项 II题解，常规解法与快慢双指针做法

    壹 ❀ 引 今天的题目来自LeetCode80. 删除有序数组中的重复项 II,是一道难度中等,但实际挺简单的一道题,题目描述如下: 给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使每 ...

  10. NVME(学习笔记三)—PMR

    PMR(Persistent Memory Region)持久性内存区域 NVM Express在2019年完成了NVMe 1.4规范的制定,新的NVMe协议带来了大量的全新特性,尤其在纠错.强化性能 ...