标签：canvas const clipboard img ctx js 复制 blob 剪切板

copyImg.js

const handleCopyImg = (imgSrc, callback, imgWidth = '100', imgHeight = '100') => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  canvas.width = imgWidth;
  canvas.height = imgHeight;

  img.crossOrigin = 'Anonymous';
  img.src = imgSrc;

  img.onload = () => {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);

    // 将canvas转为blob
    canvas.toBlob(async (blob) => {
      console.log(blob);
      const data = [
        // eslint-disable-next-line no-undef
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ];

      await navigator.clipboard.write(data)
        .then(
          () => {
            console.log('Copied to clipboard successfully!');
            callback();
          },
          () => {
            console.error('Unable to write to clipboard.');
          }
        );
    });
  };
};

export default handleCopyImg;

这个方法可以进行图片的复制，但是会有一些兼容问题（比如说ie完全不兼容，以及一些浏览器低版本也不支持）

使用的时候需要注意，navigator.clipboard 需要在安全域下使用 (https 的站点下)

本文参考自：https://juejin.cn/post/6909379124679311368

标签：canvas,const,clipboard,img,ctx,js,复制,blob,剪切板
来源： https://blog.csdn.net/TooManyDdficulty/article/details/120140406

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。