解码并使用canvas.toDataURL（）保存图像

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

在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（） - 尽管这溶液在另一个计算器给出后，人们似乎得到这个加工。本来，JS刚刚打开的图像在一个新的窗口，像这样：

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

但在浏览器窗口中的网址是Base64编码字符串，我不能做任何事情。

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

谢谢

来源

2016-03-22 Michael Emerson

你能告诉我你的这个php代码在哪里吗？我非常确定'$ img'不是'$ encodedData'。 http://php.net/manual/en/function.fopen.php – Kaiido

http://stackoverflow.com/a/8848250/5194337 - 虽然也许还有其他事情我需要做，以便正确编码图像之前它传递给ajax文件？ –

最有效和最通用的解决方案就是直接从JavaScript发送'canvas.toDataURL（）'。然后通过调用[PHP-FileUpload]（https://github.com/delight-im/PHP-FileUpload/tree/master）及其[[DataUriUpload]]（https://github.com）来替换PHP部分/delight-im/PHP-FileUpload/blob/7c950635cbd45ade9fb2656eb285259dc2a8f0fb/src/DataUriUpload.php）组件，它完成所有繁重的工作，并允许更多的控制和验证手段。这是[记录在这里]（https://github.com/delight-im/PHP-FileUpload/blob/master/README.md#data-uri-uploads）。 – caw

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

所以，我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

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

来源

2016-03-22 16:28:23

解码并使用canvas.toDataURL（）保存图像

回答

相关问题