如何将带有图像的画布保存到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"文件.在Canvas上,文件是可见的,但在IMG标签中没有任何东西可以看到.我在最新版本的Chrome上运行此功能.

Answer 1

您的代码有几个问题.

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

2. 您在canvas元素上调用.show(),而不是您为dataUrl分配的img元素.但我想知道你为什么要这样做,因为你的意图似乎是使用一个不<canvas>可见<img>的东西为可见的内容生成内容,这就是CSS样式所说的内容.

3. 应该在设置src之前定义onload处理程序,因为当图像在浏览器缓存中时,可以在设置src属性时调用onload函数,这是在定义自己的加载处理程序之前.

这是固定代码(未经测试):

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';