javascript - 使用javascript打印图像

Question

我有一个<canvas>并且我想显示打印对话框以允许用户打印图像，但它一直抛出以下错误：

未捕获的 DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

将 HTML 转换为图像，图像出现在页面上。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='1500'>" +
    "<foreignObject width='100%' height='100%'>" + jQuery("#mytable").html() +
      "<style>" +
        "table {background-color:#fff;}" +
        ".table1canvas {border: 2px solid black;" +
        "border-bottom-width:1px;}" +
        ".table2canvas {border: 2px solid black;" +
        "border-bottom-width:1px;" +
        "border-top-width:0px;}" +
        ".table3canvas {border: 2px solid black;}" +
        ".table4canvas {border: 2px solid black;" +
        "border-bottom-width:1px;" +
        "border-top-width:0px;}" +
      "</style>" +
    "</foreignObject>" +
  "</svg>";

var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {
  type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
};
img.src = url;

jQuery(document).on('click', '#printmeB', function(e) {
  btnclick();
  e.preventDefault();
});

function btnclick() {
  var canvass = document.getElementById("canvas");
  image = canvass.toDataURL("image/png", 1.0).replace("image/png", "image/octet-stream");
  var link = document.createElement('a');
  link.download = "my-image.png";
  link.href = image;
  link.click();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>

标签： javascriptcanvas