[英]html2canvas images not rendering
working away with the html2canvas and i'm having trouble with rendering the images in the output div. 与html2canvas一起工作,我在输出div中渲染图像时遇到了麻烦。 I did read that the image must reside under the same origin.
我确实读过,该图像必须位于同一原点下。 I have therefore put my images under the same directory as the html.
因此,我将图像放在了与html相同的目录下。
There is no error in the console log unfortunately. 不幸的是,控制台日志中没有错误。
I've attached a fiddle (i'm not sure images will work properly with an external url but it gives the jist of what I wish to achieve). 我附上了一个小提琴(我不确定图像是否可以与外部URL一起正常工作,但是它提供了我想要实现的目标)。
http://jsfiddle.net/8ypxW/433/ http://jsfiddle.net/8ypxW/433/
my local code looks a little like this: 我的本地代码看起来像这样:
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
<div id="widget">
<h1>test</h1>
<img src="dropboxlogo.jpg"/>
</div>
Little bit too late , but solution is to transport all images to base64 有点为时已晚,但解决方案是将所有图像传输到base64
function toDataUrl(src, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.