javascript 使用jquery将div转换为图像数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22984478/
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
convert div into image data using jquery
提问by Manoj Nayak
I have a html page. In which I have a button, whenever I click this button it should convert the entire html page into data image. I achieved this by using html2canvas as follow:
我有一个 html 页面。其中我有一个按钮，每当我单击此按钮时，它都会将整个 html 页面转换为数据图像。我通过使用 html2canvas 实现了这一点，如下所示：
html2canvas([document.getElementById('form1')], {
onrendered: function (canvas) {
var imageData = canvas.toDataURL('image/jpeg',1.0);
}
});
It is giving me the image data but without checkboxes and radio buttons. So is there any alternative to convert the html page to image data using jquery or javascript??
If there, please help me to come out from this problem.
Thank you in advance.
它给了我图像数据，但没有复选框和单选按钮。那么有没有其他方法可以使用 jquery 或 javascript 将 html 页面转换为图像数据？
如果有，请帮我解决这个问题。
先感谢您。
回答by testydonkey
You're only converting the part in form1
您只是在转换 form1 中的部分
document.getElementById('form1')
Try using
尝试使用
html2canvas(document.body, {
onrendered: function (canvas) {
var imageData = canvas.toDataURL('image/png',1.0);
}
});
回答by Sander van Leeuwen
html2canvas has issues with rendering radiobuttons and checkboxes, as described in another question @ https://stackoverflow.com/questions/19704618/how-to-display-checkbox-with-html2canvas. The solution given there is to replace those radiobuttons and checkboxes with images and then capturing the page.
html2canvas 在呈现单选按钮和复选框时存在问题，如另一个问题 @ https://stackoverflow.com/questions/19704618/how-to-display-checkbox-with-html2canvas 中所述。给出的解决方案是用图像替换这些单选按钮和复选框，然后捕获页面。
The solution provided in the question above does not work as is if I read it correctly, but should help you along to writing a working fix.
上面问题中提供的解决方案在我正确阅读时无法正常工作，但应该可以帮助您编写有效的修复程序。
