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

QQ截图在网页聊天中不能直接粘贴,要实现像QQ微信一样能直接粘贴成图片需要做一些操作
利用paste事件捕获粘贴事件,clipboardData获取剪切板中的内容将文件用filereader接口读取出来

function paseImg()
  {
    var imgReader = function (item) {
        var blob = item.getAsFile(),
            reader = new FileReader();

        reader.onloadend = function (e) {

            //显示图像
            var msg = "";
            $('#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截图粘贴)