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

时间:2016-03-22 12:56:05

标签: javascript jquery canvas html2canvas

我正在处理一个项目,该项目涉及用户将框拖放到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。在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编码的字符串,我无法做任何事情。

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

由于

1 个答案:

答案 0 :(得分: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

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