欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

实现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();
相关标签: 贴图粘贴