我想使用JavaScript保存HTML div元素的屏幕截图 .

但是div包含一个不会保存在屏幕截图中的跨源jpg .

Save Screenshot

结果JPG

Screenshot Result

https://jsfiddle.net/zdq4f547/

HTML

<div id="screenshot">
  <img id="image" src="https://i.imgur.com/H7H4xXJ.jpg">
  

  The Lord of the Rings
</div>

<p>
  <button onclick="takeScreenShot()">Save</button>
</p>

CSS

#screenshot {
  width: 300px;
  height: 300px;
  background: grey;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

#screenshot img {
  max-height: 200px;
}

JavaScript

// Load Book Image
window.onload = function() {
  var c = document.getElementById("screenshot");
  var ctx = c.getContext("2d");
  var img = document.getElementById("image");
  img.crossOrigin = "Anonymous";
  ctx.drawImage(img, 0, 0);
}


// Save Screenshot
var takeScreenShot = function() {
  html2canvas(document.getElementById("screenshot"), {
    onrendered: function (canvas) {
      var tempcanvas=document.createElement('canvas');
      tempcanvas.width=300;
      tempcanvas.height=300;

      var context=tempcanvas.getContext('2d');
      context.drawImage(canvas,0,0,300,300);

      var link=document.createElement("a");
      link.href=tempcanvas.toDataURL('image/jpeg', 90);
      link.download = 'screenshot.jpg';
      link.click();
    }
  });
}

Scripts

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js

javascript jquery html