1. Use html2canvas plug-in to take screenshots. When using custom canvas, the desired intercept area is located in the center of the view, but each time the result starts from the upper left corner of the screen

2. The code is as follows:

var createImage = function(targetEle) {
    var shareContent = targetEle;
    var width = shareContent.offsetWidth;
    var height = shareContent.offsetHeight;
    var canvas = document.createElement("canvas");
    var scale = 1;

    canvas.width = width * scale;
    canvas.height = height * scale;
    canvas.getContext("2d").scale(scale, scale);

    var opts = {
      scale: scale,
      canvas: canvas,
      logging: true,
      width: width,
      height: height
    };

    html2canvas(shareContent, opts).then(function(canvas) {
      var context = canvas.getContext("2d");

      var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

      document.body.appendChild(img);
      $(img).css({
        "width": canvas.width / 2 + "px",
        "height": canvas.height / 2 + "px",
      })
    });
  }
  

3, View
1) required intercept area:

2:

4, the method tried
1) No custom canvas can be used, but the canvas cannot be customized, so the image is blurred and cannot solve the problem of scale:2.
2) setting the style to the view is still invalid
3) plus the offset distance of the view is invalid, and the offset distance part becomes black

5. Expect
to accurately get the view of the desired intercept area and ensure the clarity of the view