使用 canvas.toDataURL(） 解码和保存图像

Decoding and saving an image using canvas.toDataURL()

本文关键字：保存 图像 解码 canvas toDataURL 使用      更新时间：2023-09-26

我正在做一个项目，该项目涉及用户将框拖放到div 上以创建布局。用户完成后，有一个按钮可以按下，该按钮获取div并使用html2canvas从中创建canvas元素，然后在新窗口中作为图像打开。这很好，但我需要它保存在某个地方，以便它可以附加到电子邮件并发送。到目前为止，我所拥有的只是 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。在结果.php文件中，我有：

$decodedData = base64_decode($_POST['data']);
$img = $decodedData;
$image = fopen($img, 'r');
file_put_contents("images/layout.png", $image);
fclose($image);

但是我收到一个警告，说我正在向 fopen（） 传递一个字符串 - 尽管这个解决方案是在另一个堆栈溢出帖子中给出的，人们似乎得到了这个工作。最初，js 只是在新窗口中打开图像，如下所示：

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

但是浏览器窗口中的 URL 是 base64 编码的字符串，我对此无能为力。

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

谢谢

好的 - 我已经排序好了。基本上，我需要在能够写入字符串之前从字符串中删除一些其他数据。

因此，我在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

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

相关文章：