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

我使用以下代码

canvas和图像的HTML代码

用于从服务器获取图像并在canvas上显示然后显示图像的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上运行此function。

Answer 1

您的代码有几个问题。

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

2. 您在canvas元素上调用.show（），而不是您为dataUrl分配的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'; 

Answer 2

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

像这样：

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