将 table 转换为 canvas，然后使用 jQuery 下载 canvas 作为图像

Question

我正在使用 HTML2Canvas 将 table 转换为 canvas，然后尝试使用下载按钮下载图像。我的代码如下：

$("input[alt='save-image']").click(function() {
  html2canvas($("table"), {
      onrendered: function(canvas) {
          this.href = canvas.toDataURL();
          this.download = "mypainting.png";
      }
  });
});

table转为图片；但是，图像永远不会下载。如果我做错了什么或者您想了解更多信息，请告诉我。

Answer 1

你可以这样下载图片-

                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();  
                });

Answer 2

感谢 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();
    }
  });
});

将 table 转换为 canvas，然后使用 jQuery 下载 canvas 作为图像

Converting a table to canvas and then downloading the canvas as image using jQuery

javascript

jquery

html2canvas