如何将 HTML5 画布保存为 png [重复]

Posted 2023-05-07

【中文标题】如何将 HTML5 画布保存为 png [重复]

【英文标题】：How to save an HTML5 canvas to a png [duplicate]

【发布时间】：2014-08-09 05:38:18

【问题描述】：

我正在尝试将画布保存为图像，以便可以将其作为标签放在网站上的其他位置。 我见过这样的方法：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var strDataURI = canvas.toDataURL("image/png;base64");
document.write('<img src="'+strDataURI+'"/>');

但我不确定如何实现它。我还希望将图像的副本保存为服务器上的实际文件，但我不知道从哪里开始。

当我实现上面的代码时，我把它放在我的画布脚本的底部，如下所示：

var finish = document.getElementID('finish');
finish.onclick = function() 

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var strDataURI = canvas.toDataURL("image/png;base64");
;

但我不知道如何实际引用图像。 我只需要对菜鸟一点帮助。

【问题讨论】：

他希望用户下载文件。我只想显示它并将其下载到服务器。 @JeremyJStarcher

【参考方案1】：

对于前端，这是一个仅显示红色背景的完整工作示例。 http://jsfiddle.net/gramhwkg/

// create a canvas
// If the canvas is already a dom element
//var canvas = document.getElementById("canvas");

// otherwise you'd rather do
var canvas = document.createElement('canvas');

// Then set a width/height grab its context.
canvas.width = 900;
canvas.height = 400;
var ctx = canvas.getContext("2d");

// ... And do plenty of nice stuff with it.
// I'll just draw it Red.
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,900,400);

// When you want it to appear elsewhere.
var data = canvas.toDataURL();
var picture = document.getElementById("my-picture");
picture.innerhtml = '<img src="' + data + '"/>' ;

后端部分并不难。只需 POST 到 php 相同的图像数据变量并以这种方式处理它：

$canvas = base64_decode(str_replace('data:image/png;base64,', '' , $value['picture']));
file_put_contents('my_custom_path/my_custom_filename.png', $canvas);

希望这会有所帮助！

【讨论】：

另外，我并没有真正使用 php，所以我将如何实现你给我的东西？ @JulienGarcia

您能否为此打开一个新问题并从此处链接它？我可以和你分享更多代码。