使用 canvas.toDataURL() 解码和保存图像答案

【问题标题】：Decoding and saving an image using canvas.toDataURL()使用 canvas.toDataURL() 解码和保存图像
【发布时间】：2016-03-22 12:56:04
【问题描述】：

我正在处理一个项目，该项目涉及用户将框拖放到 div 上以创建布局。用户完成后，有一个按钮可以按下，该按钮获取 div 并使用 html2canvas 从它创建一个画布元素，然后它在一个新窗口中作为图像打开。这很好，但我需要将它保存在某个地方，以便它可以附加到电子邮件中并发送。到目前为止，我所拥有的只是 base64 编码的字符串，我无法真正做任何事情。

在js方面，我有：

html2canvas($('#canvas')).then(function(canvas) {
    $('canvas').addClass('canvas-layout');
    var src = canvas.toDataURL();
    var output=src.replace(/^data:image\/(png|jpg);base64,/, "");
    $.post( 'result.php', { data: output })
        .done( function(response) {
            console.log(response);
        }
    );
    return false;
});

#canvas 是 div 的 ID。在 result.php 文件中，我有：

$decodedData = base64_decode($_POST['data']);

$img = $decodedData;

$image = fopen($img, 'r');
file_put_contents("images/layout.png", $image);
fclose($image);

但是我收到一个警告，说我正在将一个字符串传递给 fopen() - 尽管这个解决方案是在另一个 stackoverflow 帖子中给出的，而且人们似乎得到了这个工作。原来，js只是像这样在新窗口中打开图片：

window.open(src,'Image','width=1440,height=650,resizable=1');

但浏览器窗口中的 URL 是 base64 编码的字符串，我无法使用它。

有没有办法做我想要实现的目标？

谢谢

【问题讨论】：

你能显示你在哪里得到这个 php 代码的帖子吗？我很有信心$img 不是$decodedData。 php.net/manual/en/function.fopen.php
stackoverflow.com/a/8848250/5194337 - 尽管在将图像传递到 ajax 文件之前，我可能还需要做一些其他事情才能正确编码图像？
最有效和通用的解决方案是直接从 JavaScript 发送canvas.toDataURL()。然后将 PHP 部分替换为对 PHP-FileUpload 及其 DataUriUpload 组件的调用，该组件完成所有繁重的工作并允许更多的控制和验证方式。这是documented here。

标签： javascript jquery canvas html2canvas

【解决方案1】：

好的 - 我已经整理好了。基本上，我需要先从字符串中删除一些其他数据，然后才能写入。

所以，我在file_put_contents 之前添加了这段代码：

$img = $_POST['data']; // Using the raw encoded string
$img = str_replace('data:image/png;base64,', '', $img); // removed unnecessary string
$img = str_replace(' ', '+', $img);
$data = base64_decode($img); // then decoded it
$file = "images/layout-file_". uniqid().".png"; // define new image name
$success = file_put_contents($file, $data); // finally write to server

这样它会生成一个唯一命名的文件并且不会损坏。

【讨论】：