实现QQ截图粘贴到聊天框功能
程序员文章站
2022-06-11 10:53:08
...
QQ截图在网页聊天中不能直接粘贴,要实现像QQ微信一样能直接粘贴成图片需要做一些操作
利用paste
事件捕获粘贴事件,clipboardData
获取剪切板中的内容将文件用filereader接口读取出来
function paseImg()
{
var imgReader = function (item) {
var blob = item.getAsFile(),
reader = new FileReader();
reader.onloadend = function (e) {
//显示图像
var msg = "<img src='"+e.target.result+"' style='max-width:60%;max-height:250px;'/>";
$('#textarea').append(msg);
};
reader.readAsDataURL(blob);
};
document.getElementById("textarea").addEventListener("paste",function(e){
var clipboardData = e.clipboardData,
i = 0,
items, item, types;
if (clipboardData) {
items = clipboardData.items;
if (!items) {
return;
}
item = items[0];
types = clipboardData.types || [];
for (; i < types.length; i++) {
if (types[i] === 'Files') {
item = items[i];
break;
}
}
if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
imgReader(item);
}
}
});
}
paseImg();
上一篇: 怎么将接收到的数组转成如上格式
下一篇: Logstash收集Nginx日志
推荐阅读