使用 html2canvas 生成图片时如何避免原页面的图片放大？

Question

html2canvas生成图片时，原HTML的图片被放大

Answer 1

import html2canvas from "html2canvas";

const dom = document.getElementById("");

html2canvas(dom, {
  width: '', //宽度
  height: '', //高度
  backgroundColor: "#fff", //背景色，设置null为透明
  allowTaint: false, //是否允许跨域图片
  useCORS: true, //是否尝试使用CORS从服务器加载图像
  scale: 2, //渲染的比例，默认为浏览器设备像素比例
  logging: false //启用日志进行调试
  foreignObjectrendering: false, //如果浏览器支持，使用ForeignObject渲染
} as any).then((canvas) => {
  let base64 = canvas.toDataURL("image/png");

  console.log("====base64===", base64);
});

Answer 2

其实是可以，生成前，用一个创建新的DIV（要截图的），设置看不见（zIndex,或者opacity=0），而不是页面上已有的。生成后再删除这个新的DIV。这样页面就不会看出来任务变化。