html2canvas和jsPDF不保存外部主机的图像

Question

在我的代码中，我试图捕获div内的所有内容，包括样式和图像。如果映像属于当前主机，则不会保存，如果它们属于外部主机，则不会保存…

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<div id="printDiv">
<h2>Hello World</h2>
<p>
this content will be printed.
</p>

<img src="https://i.pinimg.com/originals/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" />
</div>
<button type="button" id="pdfDownloader">Download</button>
<script>
$(document).ready(function(){
//pdf   
$("#pdfDownloader").click(function(){

html2canvas(document.getElementById("printDiv"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
console.log('Report Image URL: '+imgData);
var doc = new jsPDF('p', 'mm', [297, 210]); //210mm wide and 297mm high

doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample.pdf');
}
});
});


})
</script>

我可以用什么替代方法在pdf中保存带有外部链接的图像?

Answer 1

你可以用jQuery &canvas2image

$(function() { 
$("#pdfDownloader").click(function() { 
var imgURL = $("#printDiv").find('img').attr('src');

html2canvas($("#printDiv"), {
onrendered: function(canvas) {
var context= canvas.getContext("2d"); // returns the 2d context object
var img = new Image() //creates a variable for a new image
img.src= imgURL; // specifies the location of the image
context.drawImage(img,0,50); // draws the image at the specified x and y location
// Convert and download as image 
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image 
Canvas2Image.saveAsPNG(canvas); 
$("#img-out").append(canvas);
}
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script>
<script type="text/javascript" src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>

<div id="printDiv">
<h2>Hello World</h2>
<p>
this content will be printed.
</p>

<img src="https://i.pinimg.com/originals/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg">
</div>
<button type="button" id="pdfDownloader">Download</button>