复制图片到剪贴板

通过fetch获取blob

function imageToBlob(url, callback) {
      fetch(url)
        .then(response => response.blob())
        .then(blob => callback(blob))
    }
    imageToBlob('./test.png', blob => {
      var clipboardItem = new ClipboardItem({
        [blob.type]: blob
      });
      navigator.clipboard.write([clipboardItem]).then(res => {
        alert('图片复制成功')
      })
    })

通过img标签

function copy(){
      // 创建图片
      var img = document.createElement('img');
      img.src = "./test.png"
      document.body.appendChild(img);
      // 创建DOM范围
      var myrange = document.createRange();
      myrange.setStartBefore(img);
      myrange.setEndAfter(img);
      myrange.selectNode(img);
      // 添加到选区
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(myrange);
      // 复制图片
      document.execCommand('copy');
      // 删除图片清除选区
      selection.removeAllRanges();
      document.body.removeChild(img);
    }

通过canvas获取blob

function copy(){
      var imgURL = './test.png';
      var img = document.createElement('img');
      img.src = imgURL;
      img.crossOrigin = "Anonymous";
      img.onload = function () {
        copyImg(img);
      }
      function copyImg(img) {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0, img.width, img.height);
        if (canvas.toBlob) {
          canvas.toBlob((blob) => {
            var clipboardItem = new ClipboardItem({ [blob.type]: blob });
            navigator.clipboard.write([clipboardItem]).then(()=>{alert('复制成功')});
          });
        }
      }
    }