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

我在一个生成艺术项目上工作，我想让用户从算法中保存结果图像。大意是:

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

然而，我卡在了第二步上。在谷歌的帮助下，我找到了这篇博客文章，这似乎正是我想要的:

这就引出了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);
}
?>

但这似乎没有任何作用。

更多的谷歌发现这篇博客文章是基于之前的教程。差别不大，但或许值得一试:

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

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

这一个创建了一个文件(耶)，但它已损坏，似乎不包含任何东西。它看起来也是空的(文件大小为0)。

我做错了什么吗?我存储文件的路径是可写的，所以这不是一个问题，但似乎什么都没有发生，我不确定如何调试这一点。

Edit

下面是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。但是，我仍然无法打开它，它似乎没有被格式化为图像。

当前回答

我做过类似的工作。必须转换画布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);

2018-03-23 01:19:18

其他回答

我做过类似的工作。必须转换画布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);

2018-03-23 01:19:18

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

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

否则解码将不起作用:图像将被保存，但它将是一个不可读的文件。

2014-10-24 15:27:20

如果您想保存从Javascript canvas.toDataURL()函数派生的数据，则必须将空格转换为加号。如果你不这样做，解码的数据是损坏的:

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

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

2014-02-06 05:15:04

我认为你应该将图像转换为base64，然后转换为Blob，并将其发送到服务器。当你使用base64图像时，很多行会被发送到服务器。对于blob，它只是文件。

你可以使用下面的代码:

function dataURLtoBlob(dataURL) {
  let array, binary, i, len;
  binary = atob(dataURL.split(',')[1]);
  array = [];
  i = 0;
  len = binary.length;
  while (i < len) {
    array.push(binary.charCodeAt(i));
    i++;
  }
  return new Blob([new Uint8Array(array)], {
    type: 'image/png'
  });
};

这里是canvas代码:

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

之后，你可以使用ajax与表单:

const fd = new FormData;

fd.append('image', file);

$.ajax({
  type: 'POST',
  url: '/url-to-save',
  data: fd,
  processData: false,
  contentType: false
});

CoffeeScript语法中的代码:

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代码:

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

之后，你可以使用ajax与表单:

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

2016-09-19 16:16:19

下面是一个如何实现你所需要的例子:

画一些东西(取自画布教程)

<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>

将画布图像转换为URL格式(base64) / /脚本 var dataURL = canvas.toDataURL(); 通过Ajax将其发送到服务器

. ajax({美元类型:“文章”, url:“script.php”, 数据:{ imgBase64: dataURL ｝ }) .done(函数(o) { console.log('保存'); //如果你想让文件在浏览器中可见 // -请在javascript中修改回调。所有你 //需要的是返回url到刚才保存的文件 //然后将图像放到浏览器中。 });

将base64保存在服务器上作为映像(这里是如何在PHP中做到这一点，在每种语言中都是相同的想法。PHP服务器端可以在这里找到):

2012-11-02 15:51:08

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

推荐文章

最新文章

标签