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。