Javascript HTML2canvas 和 Canvas2image，下载的屏幕截图不显示我的 HTML 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25933587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML2canvas and Canvas2image, downloaded screenshot doesn't show my HTML images
提问by user3423339
I've been working on a HTML page that I want to convert into an image.
我一直在处理要转换为图像的 HTML 页面。
I have been using the html2canvas and canvas2image scripts and taken this code http://jsfiddle.net/8ypxW/3/here that has allowed me to create a button that will take a screenshot and download my HTML page as an image.
我一直在使用 html2canvas 和 canvas2image 脚本并在http://jsfiddle.net/8ypxW/3/此处获取此代码，这使我可以创建一个按钮，该按钮将截取屏幕截图并将我的 HTML 页面下载为图像。
The problem I'm having is that my downloaded screenshot image shows my text but not my image, even though they are from the same origin. I'm not sure if it's a problem with my HTML, HTML2canvas or canvas2image.
我遇到的问题是我下载的屏幕截图显示了我的文本而不是我的图像，即使它们来自同一来源。我不确定这是否是我的 HTML、HTML2canvas 或 canvas2image 的问题。
My example is not live yet but my code is below:
我的示例尚未上线，但我的代码如下：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="Canvas2Image.js"></script>
<div id="wrapper" style="background-color: white"; width="1000px" height="900px">
<img src="header.jpg" width= "900px">
tecno diagnostics
</div><!---- End Wrapper ---->
<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>
<script type="text/javascript">
$(function() {
$("#btnSave").click(function() {
html2canvas($("#wrapper"), {
onrendered: function(canvas) {
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
</script>
If anyone can help me out or point me in the right direction that would be much appreciated.
如果有人可以帮助我或为我指明正确的方向，我将不胜感激。
Thanks in advance
提前致谢
回答by Alexee
document.querySelector('button').addEventListener('click', function() {
html2canvas(document.querySelector('.specific'), {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);
}
});
});body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
background-color: #fff;
padding-left: 15px;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
h1 {
font-size: 36px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small {
font-size: 65%;
font-weight: 400;
line-height: 1;
color: #777;
display: block;
padding-top: 15px;
}
.specific {
background-color: #fff;
}
p a {
padding: 5px;
}<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="specific">
<h1>Click to Take a Screenshot & Download it! <small>using html2canvas.js + canvas2image.js</small></h1>
<p>This is a simple demo.</p>
<p>Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.</p>
<button type="button" class="btn btn-default">Take a Screenshot!</button>
<p>References: <a href="http://html2canvas.hertzen.com/">html2canvas.js</a><a href="https://github.com/SuperAL/canvas2image">canvas2image.js</a>
</p>
</div>A working demo using html2canvas.js& canvas2image.js:
使用html2canvas.js& canvas2image.js 的工作演示：
回答by Sviatoslav Zalishchuk
You're appending canvasobject to the DOM, which doesn't make much sense in this case. You either want to convert rendered image to base64 and then append it to the DOM in the img tag or just call a saveAsPng()method to save image to the file system.
您将canvas对象附加到 DOM，在这种情况下没有多大意义。您要么想将渲染图像转换为 base64，然后将其附加到 img 标记中的 DOM，要么只是调用saveAsPng()方法将图像保存到文件系统。
Try this, if you would like to append image to the DOM:
试试这个，如果你想将图像附加到 DOM：
html2canvas(element, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
$('body').append('<img src="'+img+'"/>');
}
});
Or this, if you would like to save it.:
或者这个，如果你想保存它。：
$(function() {
$("#btnSave").click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
return Canvas2Image.saveAsPNG(canvas);
}
});
})
});
Haven't tried the second snippet, but it should work.
还没有尝试过第二个片段，但它应该可以工作。
