html2canvas绘制可视区域内的图片 无感绘制 使用z-index:-2 层级放到最低 就可以实现

getPoster(e) {
console.log($(“#capture”))
if(e){
$(“#capture”).show()
}

  var shareContent =  $("#capture")[0]; //需要截图的包裹的（原生的）DOM 对象
  var width = 600; //获取dom 宽度可以动态获取
  var height = 1000; //获取dom 高度可以动态获取
  var canvas = document.createElement("canvas"); //创建一个canvas节点
  var scale = 1; //定义任意放大倍数 支持小数

  canvas.width = width * scale; //定义canvas 宽度 * 缩放
  canvas.height = height * scale; //定义canvas高度 *缩放
  canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

  var opts = {
    scale: scale, // 添加的scale 参数
    canvas: canvas, //自定义 canvas
    // logging: true, //日志开关，便于查看html2canvas的内部执行流程
    width: width, //dom 原始宽度
    height: height,
    useCORS: true, // 【重要】开启跨域配置
  };
  html2canvas(shareContent, opts).then(function (canvas) {
    var context = canvas.getContext("2d");
    // 【重要】关闭抗锯齿
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    // 【重要】默认转化的格式为png,也可设置为其他格式
    var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);
    console.log(img)

    $("#capture").hide();
    $(".loadding_box").hide();
    if(e){
      $(".poster_img img").attr("src",img.src)
    }else{
      $(".poster_img").show().append(img);
    }
    $(".download_btn2").attr("href", $(".poster_img img").attr("src"));
    $(".download_btn2").removeClass("hide");
  });
},