react实现某个元素节点截图(html2canvas)

1.安装所需插件:html2canvas;

2.引入插件:

import html2canvas from 'html2canvas';

3.使用:

const creatImg = () => { // 绑定在某个点击事件
    html2canvas(document.getElementById('aphoto'), { // aphoto为被截图节点id
      allowTaint: false,
      useCORS: true, // 支持跨域图片的截取,不然图片截取不出来
      // 图片服务器配置 Access-Control-Allow-Origin: *
    }).then(canvas => {
      const link = document.createElement('a'); // 建立一个超连接对象实例
      const event = new MouseEvent('click'); // 建立一个鼠标事件的实例
      link.download = 'img.png'; // 设置要下载的图片的名称
      link.href = canvas.toDataURL(); // 将图片的URL设置到超连接的href中
      link.dispatchEvent(event); // 触发超连接的点击事件
    })
  }

4.支持跨域图片:img标签添加crossOrigin = "anonymous";

5.希望被过滤掉的部分,标签添加属性data-html2canvas-ignore。

posted @ 2022-07-14 17:05  桃李子  阅读(999)  评论(0编辑  收藏  举报