ImageClipboard js粘贴剪切板图片，已测试，可用，可获得base64
ImageClipboard js粘贴剪切板图片，已测试，可用，可获得base64
具体用到自己项目的时候，拿源码改成自己的库，从写一遍
3个小问题
- onpaste 执行了两遍，一次是图片加载完成，一次是加载图片之前。按说 应该搞两个事件来分别调用
- pasteCatcher 应该是作为一个保底实现，我也没看明白是怎么获取剪切板的图片，怎么就能拿到base64了，反正通过e.clipboardData.items是拿到图片了
- 大哥遍历了整个剪切板的图片，全部走了一遍函数，这性能会不会有点问题，也不知道。
结论
不管怎么说，这个代码能用，别的库，好多都不能用。
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的更多相关文章
- JS访问剪切板中的图片
google出来一个html2canvas,它利用canvas来渲染读取的DOM树,也就是说它只能截取document里的内容,如果要像qq截图那样,应该怎么做?用过百度的Ueditor编辑器的朋友都 ...
- 经验分享：计算机 web 浏览器——访问剪切板图片
有时候,我们希望能访问用户的剪切板,来实现一些方便用户的功能:但是另一方面,剪切板里的数据对用户来说又是非常隐私的,所以浏览器在获取信息方面有安全限制,同时也提供访问接口. 当我们需要实现在富文本 ...
- JS从剪切板里粘贴图片
功能需求:在网页中,Ctrl+V,把系统剪切板的图片(比如QQ截图)进行粘贴.显示.上传...,提高用户体验. 参考链接:https://ruby-china.org/topics/17266 git ...
- js修改剪切板内容的方法
代码如下: //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy事件. $(document.body).bind({ copy: function(e) {//copy ...
- js 操作剪切板
1.IE浏览器 window.clipboardData: setData() //设置值 getData()//获取值 clearData()//删除值 /******* ** IE 浏览器下支持w ...
- JS实现剪切板添加网站版权、来源
公司官网有这样需求,写好后,备份以后留用. 只兼容chrome.firefox.IE9+等主流浏览器. // https://developer.mozilla.org/en-US/docs/Web/ ...
- js操作cookie(转载：经测试可用)
/***js操作cookie,star***/ function addCookie(objName,objValue,objsec){//添加cookie var str = objName + ...
- win7下virtualbox装linux共享win7文件问题(已测试可用)
virtualbox这个比较强大,在win7上跑redhat5u4很流畅.os之间共享文件是个大家都很关心的问题,这会直接关系到虚拟机用的爽不爽. 在win7和其上的虚拟机linux之间共享文件也很容 ...
- 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件
[源码下载] 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件 作者:webabcd 介绍重新想象 Windows 8 Store ...
- Javascript操作剪切板数据（支持IE、Chrome、360、搜狗），亲测！
clipboarddata只能在IE浏览器中使用,在chrome下会提示对象未定义!以下的方法支持IE.Chrome.360.搜狗等浏览器,其它浏览器还未验证. <!DOCTYPE html&g ...
随机推荐
- 【四】gym搭建自己的环境，全网最详细版本，3分钟你就学会了！
相关文章: [一]gym环境安装以及安装遇到的错误解决 [二]gym初次入门一学就会-简明教程 [三]gym简单画图 [四]gym搭建自己的环境,全网最详细版本,3分钟你就学会了! [五]gym搭建自 ...
- 又学了一招：微软科普Windows 11电脑自动清理释放硬盘
你是不是每次都等到电脑内存被占满,磁盘"红"成一片,才想起来去清理那些没用的程序or文件? 今天微软官方科普了一个小技巧:既然都用上了Windows 11 ,为什么不让电脑帮你自动 ...
- .NET桌面程序如何设置任务栏图标右键菜单中的名称
右键任务栏中应用程序图标时会显示程序名称,例如: 这里显示的并不是程序文件名DingTalk,而是文件属性中详细信息选显卡下的"文件说明". 在.NET桌面程序中,是通过修改程序集 ...
- 进程状态｜操作系统｜什么是pcb｜什么是僵尸进程 ｜什么是孤儿进程 【超详细的图文解释】【Linux OS】
说在前面 今天给大家带来操作系统中进程状态的详解. 本篇博主将通过从进程状态的广泛概念,深入到Linux操作系统详细的一些进程状态.在解释进程状态的过程中,博主还会穿插一些操作系统一些重要概念!本篇干 ...
- FOG Project的 FOS 编译
FOG Project系统是一个免费的开源计算机网络克隆和管理解决方案系统,与传统的Ghost有很大的不同,如果您是计算机维护管理人员,当有大量机器需要同时部署上线的时候FOG Project是一个可 ...
- KB0004.如何进行DoraCloud版本升级？
升级过程为: 1).现有版本,进入维护模式,导出系统数据. 2).记录现当前版本DoraCloud VM 的IP地址,子网掩码.网关.DNS信息,将VM关机. 3).安装新版本DoraCloud ...
- 【奶奶看了都会】ChatGPT3.5接入企业微信，可连续对话
1.连续对话效果 小伙伴们,这周ChatGPT放出大招,开放了GPT3.5的API.说简单点,就是提供了和ChatGPT页面对话一样模型的接口.而之前接的ChatGPT接口都是3.0,并不是真正的Ch ...
- 6.用户输入和 while 循环--《Python编程：从入门到实践》
6.1 input 函数 函数input()接受一个参数:即要向用户显示的提示或说明.input 将用户输入解释为字符串. name = input("Please enter your n ...
- MySQL执行函数时报错：Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_0900_ai_ci,IMPLICIT) for operation 'find_in_set'
执行函数时报错: Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_0900_ai_ci,IMPLICIT) f ...
- Python 字典与集合
字典(Dictionary) 字典介绍 字典是"键值对"的无序可变序列,字典中的每个元素都是一个"键值对",包含:"键对象"和"值 ...