如何将HTML5画布另存为服务器上的图像?


260

我正在从事一个生成艺术项目,我希望允许用户从算法中保存生成的图像。总体思路是:

  • 使用生成算法在HTML5 Canvas上创建图像
  • 图像完成后,允许用户将画布作为图像文件保存到服务器
  • 允许用户下载图像或将其添加到使用该算法制作的作品库中。

但是,我坚持第二步。在Google的帮助下,我找到了此博客文章,这似乎正是我想要的:

导致了JavaScript代码:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/upload");
  ajax.send("imgData=" + canvasData);
}

和相应的PHP(testSave.php):

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $unencodedData = base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

但这似乎根本不起作用。

More Googling打开了此博客文章,该文章基于先前的教程。差别不大,但也许值得一试:

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;

这个创建了一个文件(是),但是它已损坏并且似乎不包含任何内容。它也似乎是空的(文件大小为0)。

我做错了什么吗?我存储文件的路径是可写的,所以这不是问题,但是似乎什么也没有发生,而且我不确定如何调试它。

编辑

通过Salvidor Dali的链接,我将AJAX请求更改为:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  ajax.open("POST", "testSave.php", false);
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.send("imgData=" + canvasData);
}

现在,图像文件已创建,并且不为空!似乎内容类型很重要,并且将其更改为x-www-form-urlencoded允许发送图像数据。

控制台返回(相当大的)base64代码字符串,数据文件约为140 kB。但是,我仍然无法打开它,并且它似乎没有被格式化为图像。


您在使用ajax.send(canvasData );时使用的第一个博客帖子ajax.send("imgData="+canvasData);。因此$GLOBALS["HTTP_RAW_POST_DATA"]不会达到您的期望,您应该使用$_POST['imgData']
MatteusHemström'12


Diodeus:我已经在使用该线程中建议的技术了。但是,他们没有提供有关实现的任何更多详细信息,这就是我遇到的问题。
森·拉琴梅尔(Nathan lachenmyer)2012年

当我回显文件信息($data在第二个php代码中)时,我得到的只是空白行。为什么会这样呢?似乎正在发送的数据不正确,但似乎我正在像示例所示发送它……
nathan lachenmyer 2012年

通过使用PHP-FileUpload及其DataUriUpload组件,可以简化PHP代码并使其更健壮。它在此处进行了记录,并附带有几种其他的验证和强制执行安全性的方法。
caw

Answers:


241

这是一个如何实现您所需要的示例:

1)画点东西(摘自画布教程

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // begin custom shape
    context.beginPath();
    context.moveTo(170, 80);
    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
    context.bezierCurveTo(420, 150, 420, 120, 390, 100);
    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
    context.bezierCurveTo(200, 5, 150, 20, 170, 80);

    // complete custom shape
    context.closePath();
    context.lineWidth = 5;
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.strokeStyle = 'blue';
    context.stroke();
</script>

2)将画布图像转换为URL格式(base64)

var dataURL = canvas.toDataURL();

3)通过Ajax将其发送到您的服务器

$.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 
  // If you want the file to be visible in the browser 
  // - please modify the callback in javascript. All you
  // need is to return the url to the file, you just saved 
  // and than put the image in your browser.
});

3)将base64保存为服务器上的映像(这是在PHP中执行此操作的方法,每种语言都具有相同的想法。在PHP的服务器端可以在此处找到):


1
我的意思是该文件在那里,但是如果我下载该文件,它将无法在我的浏览器或任何图像查看器中打开。
nathan lachenmyer 2012年

You send it to your server as an ajax request此方法需要用户确认吗?或者我可以将图像从画布无声发送到服务器?
MyTitle

我在Web Console上收到错误消息。[16:53:43.227] SecurityError:操作不安全。@ sharevi.com/staging/canvas.html:43该连接不安全。有什么事情需要做吗?///更新我想我知道为什么,我正在使用跨域图像
Nikolaos Vassos

1
但是alpha为0,表示不填充,这是完全透明的。无论前三个值是多少。
Abel D

68

两周前我玩过这个游戏,非常简单。唯一的问题是,所有教程都只讨论本地保存图像。这是我的方法:

1)我设置了一个表单,以便可以使用POST方法。

2)用户完成绘制后,可以单击“保存”按钮。

3)单击按钮后,我将图像数据放入一个隐藏字段中。之后,我提交表格。

document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();

4)提交表单时,我有一个小的PHP脚本:

<?php 
$upload_dir = somehow_get_upload_dir();  //implement this function yourself
$img = $_POST['my_hidden'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
?>

1
我可以使用canvas.toDataURL()吗?我具有动态文件扩展名,例如jpeg,png,gif。我尝试了canvas.toDataURL('image / jpg'),但是它不起作用。怎么了?
Ivo San

尝试通过AJAX从画布发送图像时出现413错误(请求太大)。然后这种方法帮助我获得了图像。
Raiyan 2014年

1
任何原因给我一个0kb png文件?
棱镜规格

3
对于jpg,您需要执行canvas.toDataURL('image / jpeg') -至少多数民众赞成在Chrome上为我完成的工作。
克里斯

谢谢,这就是我所需要的:D
FosAvance

21

我认为您应该将base64中的图像转移到带有blob的图像,因为当您使用base64 image时,它会花费很多日志行,或者很多行会发送到服务器。使用blob,它仅是文件。您可以在下面使用此代码:

dataURLtoBlob = (dataURL) ->
  # Decode the dataURL
  binary = atob(dataURL.split(',')[1])
  # Create 8-bit unsigned array
  array = []
  i = 0
  while i < binary.length
    array.push binary.charCodeAt(i)
    i++
  # Return our Blob object
  new Blob([ new Uint8Array(array) ], type: 'image/png')

和画布代码在这里:

canvas = document.getElementById('canvas')
file = dataURLtoBlob(canvas.toDataURL())

之后,您可以将ajax与Form一起使用:

  fd = new FormData
  # Append our Canvas image file to the form data
  fd.append 'image', file
  $.ajax
    type: 'POST'
    url: '/url-to-save'
    data: fd
    processData: false
    contentType: false

这段代码使用CoffeeScript语法。

如果要使用javascript,请将代码粘贴到http://js2.coffee


12

将画布图像发送到PHP:

var photo = canvas.toDataURL('image/jpeg');                
$.ajax({
  method: 'POST',
  url: 'photo_upload.php',
  data: {
    photo: photo
  }
});

这是PHP脚本:
photo_upload.php

<?php

    $data = $_POST['photo'];
    list($type, $data) = explode(';', $data);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);

    mkdir($_SERVER['DOCUMENT_ROOT'] . "/photos");

    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/photos/".time().'.png', $data);
    die;
?>

9

如果要保存从Javascript canvas.toDataURL()函数派生的数据,则必须将空格转换为正号。如果不这样做,则解码的数据将被破坏:

<?php
  $encodedData = str_replace(' ','+',$encodedData);
  $decocedData = base64_decode($encodedData);
?>

http://php.net/manual/ro/function.base64-decode.php


7

我已经做了类似的工作。必须将canvas Base64编码的图像转换为Uint8Array Blob

function b64ToUint8Array(b64Image) {
   var img = atob(b64Image.split(',')[1]);
   var img_buffer = [];
   var i = 0;
   while (i < img.length) {
      img_buffer.push(img.charCodeAt(i));
      i++;
   }
   return new Uint8Array(img_buffer);
}

var b64Image = canvas.toDataURL('image/jpeg');
var u8Image  = b64ToUint8Array(b64Image);

var formData = new FormData();
formData.append("image", new Blob([ u8Image ], {type: "image/jpg"}));

var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/upload", true);
xhr.send(formData);

4

除了萨尔瓦多·达利的答案:

在服务器端不要忘记数据来自base64 字符串格式输入的。这很重要,因为在某些编程语言中,您需要明确地说此字符串应被视为字节,而不是简单的Unicode字符串。

否则,解码将不起作用:图像将被保存,但是将是无法读取的文件。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.