如何使用图像画布保存为PNG文件

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”文件。在画布上，文件是可见的，但在IMG标签中什么也看不到。我正在使用最新版本的Chrome。

来源

2013-04-04 Rahul Kadukar

有几个问题与您的代码。

您在加载和绘制jpeg图像之前调用toDataUrl，以便获取空画布的数据URL。移动最后三行的例子成image.onload处理函数，它应该工作。
您的canvas元素上调用.show（），而不是img元素，你分配给dataUrl。但我不知道为什么你这样做的所有，因为它看起来像你的意图是用一种无形的<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';

来源

2013-04-04 15:48:13 Philipp

完美的任何区别，这工作。所以我必须在绘制图像后才能使用toDataURL。感谢你的回答。我只是隐藏在画布上，因为我不希望最终用户看到是如何被产生的图像。 – 2013-04-05 09:34:02

我想在onload调用SRC之前应该来。

像这样：

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

来源

2013-04-04 13:04:07 Xavero

尝试这个为好，并没有进行任何形式 – 2013-04-04 14:02:47

如何使用图像画布保存为PNG文件

回答

相关问题