Javascript 将表转换为画布,然后使用jQuery将画布作为图像下载
我使用HTML2Canvas将表格转换为画布,然后尝试使用下载按钮下载图像。我的代码如下:Javascript 将表转换为画布,然后使用jQuery将画布作为图像下载,javascript,jquery,html2canvas,Javascript,Jquery,Html2canvas,我使用HTML2Canvas将表格转换为画布,然后尝试使用下载按钮下载图像。我的代码如下: $("input[alt='save-image']").click(function() { html2canvas($("table"), { onrendered: function(canvas) { this.href = canvas.toDataURL(); this.download = "mypainting.png";
$("input[alt='save-image']").click(function() {
html2canvas($("table"), {
onrendered: function(canvas) {
this.href = canvas.toDataURL();
this.download = "mypainting.png";
}
});
});
将表格转换为图像;但是,该图像从不下载。如果我做错了什么,或者您想知道更多信息,请告诉我。您可以下载这样的图片-
html2canvas($('table').get(0)).then( function (canvas) {
// document.body.appendChild(canvas);//
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
//a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
a.download = 'mypainting.png';
a.click();
});
你可以下载像这样的图片-
html2canvas($('table').get(0)).then( function (canvas) {
// document.body.appendChild(canvas);//
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
//a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
a.download = 'mypainting.png';
a.click();
});
感谢T.Shah,我成功了,这是我的最终代码:
$("input[alt='save-image']").click(function() {
html2canvas($("table").get(0), {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'Pixel-Drawing.png';
a.click();
}
});
});
感谢T.Shah,我成功了,这是我的最终代码:
$("input[alt='save-image']").click(function() {
html2canvas($("table").get(0), {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'Pixel-Drawing.png';
a.click();
}
});
});
这真的帮了我很大的忙。非常感谢你这真的帮了我很大的忙。非常感谢你这么好的一个。。。不要在图像名称中留下空格。好的。。。不要在图像名称中留下空格。