Use the html2canvas plug-in to take screenshots from the upper left corner of the screen?

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:

clipboard.png

2:

clipboard.png

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

Mar.04,2021

can control the attributes x and y to achieve


I solved
la


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);
    
    //
    canvasDom=canvas.getContext("2d")
    canvasDom.translate(('-'+(shareContent.offsetLeft),'-'+(shareContent.offsetTop))

    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",
      })
    });
  }
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7b7947-267e0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7b7947-267e0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?