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

您的代码存在一些问题。

在加载和绘制jpeg图像之前，您正在调用toDataUrl，因此您将获得空白画布的数据URL。将示例的最后三行移动到image.onload的处理函数中，它应该可以工作。
您在canvas元素上调用.show（），而不是您为dataUrl分配的img元素。但我想知道你为什么要这样做，因为你的意图似乎是使用一个不可见的<canvas>为可见的<img>生成内容，这就是CSS样式所说的。
应该在设置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';

Answer 2

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

像这样：

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

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

2 个答案: