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. 提升编码幸福感的秘密「GitHub 热点速览」

    写代码是一个充满挑战的事情,在这段充满挑战的旅途中,我们都渴望找到那个提升幸福感的秘密.没准是更先进或是更快的工具,希望本期热点速递的开源项目,能给你带来启迪和乐趣,上菜! 第一个上场的是一款用 Ru ...

  2. TP5图片处理常见问题

    一.Class 'think\Image' not found composer require topthink/think-image 装上了扩展控制器头部加了 use think\Image然后 ...

  3. CF452F Permutation 与 P2757 [国家集训队] 等差子序列 题解

    两道基本一样的题: 题目链接: P2757 [国家集训队] 等差子序列 Permutation 链接:CF 或者 洛谷 等差子序列那题其实就是长度不小于 \(3\) 的等差数列是否存在,我们考虑等于 ...

  4. Socket.D 协议的开发缘由

    为什么搞个新协议? 2021年时,想为 Solon 生态 提供一种 MVC 体验的 Socket 和 WebSocket 开发方式.这个想法,要求消息"能路由"."有元信 ...

  5. 试用Proxmox VE 8.0搭建云桌面系统

    6月22日发布了其服务器虚拟化管理平台 Proxmox 虚拟环境的稳定版 0.12.这个主要版本基于最新的Debian 7("书虫"),并为Proxmox VE 4.8或旧版本的用 ...

  6. 文心一言 VS 讯飞星火 VS chatgpt (195)-- 算法导论14.3 3题

    三.用go语言,请给出一个有效的算法,对一个给定的区间i,返回一个与i重叠且具有最小低端点的区间;或者当这样的区间不存在时返回T.nil. 文心一言,去掉math,代码正常运行: 在Go语言中,你可以 ...

  7. .NET Core开发实战(第12课:配置变更监听)--学习笔记

    12 | 配置变更监听:配置热更新能力的核心 这一节讲解如何使用代码来监视配置变化并做出一些动作 当我们需要追踪配置发生的变化,可以在变化发生时执行一些特定的操作 配置主要提供了一个 GetReloa ...

  8. ES6学习 第四章 字符串的新增方法

    前言 本章介绍字符串对象的新增方法.不常用的方法不做重点笔记. 本章原文链接:字符串的新增方法 includes().startsWith().endsWith() 确定一个字符串是否包含在另一个字符 ...

  9. OGP协议的使用

    OGP协议是一套Metatags的规格,用来标注页面,告诉我们你的网页快照.帮助社交app高效并准确的获取网页中的核心链接.标题.主图.正文摘要等信息,使得该网页在社交分享中有更好的展现体验. 如果网 ...

  10. P2P通讯方式

    概述 实现p2p通讯我们提供两种方式,这两种方式分别是通过客户端直接互通和p2p映射: 无论哪一种,首先设备两端都得部署好fastnat客户端,NAT类型不能是对称类型NAT(Symmetric),否 ...