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

How to save a canvas with image to a PNG file

本文关键字：保存 文件 PNG 布保存 图像      更新时间：2023-09-26

我使用以下代码

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标签中什么也看不见。

你的代码有几个问题。

  1. 在加载并绘制jpeg图像之前调用toDataUrl，因此您获得空画布的数据URL。将示例的最后三行移动到image的处理程序函数中。

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

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

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

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

我认为onload调用应该出现在src.

: 

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