如何将带有图像的画布保存为 PNG 文件

Question

我正在使用以下代码

HTML 画布和图像的代码

<canvas id="myCanvas" style="display:none" width="400" height="400"></canvas>
<img id="canvasImg" />

JavaScript 代码，用于从服务器获取图像并显示在画布上，然后显示图像

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

baseimage        = new Image();
baseimage.src    = 'what.jpg';
baseimage.onload = function() {
    ctx.drawImage(baseimage,1,1);
}

var dataURL = canvas.toDataURL("image/png");
document.getElementById('canvasImg').src = dataURL;
$("#myCanvas").show();

图片正在显示，但没有“what.jpg”文件。在画布上文件是可见的，但在 IMG 标签中什么都看不到。我在最新版本的 Chrome 上运行它。

Answer 1

您的代码有几个问题。

1. 您在 jpeg 图像加载和绘制之前调用了 toDataUrl，因此您获得了一个空画布的数据 URL。将示例的最后三行移到 image.onload 的处理函数中，它应该可以工作。

2. 您在 canvas 元素上调用 .show()，而不是您将 dataUrl 分配给的 img 元素。但我想知道你为什么要这样做，因为看起来你的意图是使用不可见的<canvas> 为可见的<img> 生成内容，这就是 CSS 样式所说的。

3. onload handler 应该在设置 src 之前定义，因为当图像在浏览器缓存中时，onload 函数可以在设置 src 属性的那一刻被调用，这是在你定义自己的 load handler 之前.

这是固定代码（未经测试）：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

baseimage        = new Image();
baseimage.onload = function() {
    ctx.drawImage(baseimage,1,1);    
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById('canvasImg').src = dataURL;
}
baseimage.src    = 'what.jpg';

Answer 2

我认为 onload 调用应该在 src 之前。

像这样：

baseimage = new Image();
baseimage.onload = function() {
ctx.drawImage(baseimage,1,1);
}
baseimage.src = 'what.jpg';