现在的位置: 首页 > web前端 > 正文

实现QQ截图粘贴到聊天框功能

2020年02月12日 web前端 ⁄ 共 829字 ⁄ 字号 评论关闭

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();

以上就上有关实现QQ截图粘贴到聊天框功能的相关介绍,要了解更多php教程_php自学_php视频教程下载 - 绵阳技术博客内容请登录学步园。

抱歉!评论已关闭.