javascript 如何将带有图像的画布保存为 PNG 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15811897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save a canvas with image to a PNG file
提问by Rahul Kadukar
I am using the following code
我正在使用以下代码
HTMLCode for the Canvas and the image
画布和图像的HTML代码
<canvas id="myCanvas" style="display:none" width="400" height="400"></canvas>
<img id="canvasImg" />
JavaScriptcode for fetching the image from the server and displaying on the canvas followed by displaying the image
用于从服务器获取图像并在画布上显示然后显示图像的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();
The image is being displayed but without the "what.jpg" file. On the Canvas the file is visiible but in the IMG tag nothing can be seen. I am running this on the latest version of Chrome.
正在显示图像但没有“what.jpg”文件。在画布上文件是可见的，但在 IMG 标签中什么也看不到。我在最新版本的 Chrome 上运行它。
回答by Philipp
There are several problems with your code.
您的代码有几个问题。
You are calling toDataUrl before the jpeg image has been loaded and drawn, so you get the data URL of an empty canvas. Move the last three lines of your example into the handler function for image.onload and it should work.
You are calling .show() on the canvas element, not the img element you assigned the dataUrl to. But I wonder why you do this at all, because it seems like your intention is to use an invisible
<canvas>to generate content for a visible<img>, and that's what the CSS styling says.The onload handler should be defined before setting the src, because when the image is in the browsers cache, the onload function could be called the moment the src attribute is set, which is before you defined your own load handler.
您在加载和绘制 jpeg 图像之前调用 toDataUrl，因此您可以获得空画布的数据 URL。将示例的最后三行移动到 image.onload 的处理函数中，它应该可以工作。
您正在 canvas 元素上调用 .show() ，而不是您将 dataUrl 分配给的 img 元素。但我想知道您为什么要这样做，因为您的意图似乎是使用不可见
<canvas>来为可见生成内容<img>，这就是 CSS 样式所说的。应该在设置 src 之前定义 onload 处理程序，因为当图像在浏览器缓存中时，可以在设置 src 属性的那一刻调用 onload 函数，这是在您定义自己的加载处理程序之前。
This is the fixed code (untested):
这是固定代码（未经测试）：
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';
回答by Xavero
i think the onload call should come before the src.
我认为 onload 调用应该在 src 之前。
Like this:
像这样：
baseimage = new Image();
baseimage.onload = function() {
ctx.drawImage(baseimage,1,1);
}
baseimage.src = 'what.jpg';
