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

我正在进行一个生成性艺术项目，我想让用户保存算法生成的图像。总的想法是：

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

然而，我被困在第二步。在谷歌的帮助下，我发现了这个，这似乎正是我想要的：

这导致了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）：

这一个创建了一个文件（耶），但它已损坏，似乎不包含任何内容。它似乎也是空的（文件大小为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。但是，我仍然无法打开它，而且它似乎没有格式化为图像。

下面是一个如何实现所需功能的示例：

画一些东西（取自）

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
//开始自定义形状
context.beginPath（）；
上下文。moveTo（170,80）；
贝塞尔曲线图（130100130150230150）；
贝塞尔曲线图（250180320180340150）；
贝塞尔曲线图（420150420120390100）；
贝塞尔曲线图（430、40370、30340、50）；
贝塞尔曲线图（320,5250,20250,50）；
贝塞尔曲线图（200,5150,20170,80）；
//完全自定义形状
closePath（）；
context.lineWidth=5；
context.fillStyle='#8ED6FF'；
context.fill（）；
context.strokeStyle='blue'；
stroke（）；

我两周前玩过这个，很简单。唯一的问题是，所有教程都只讨论在本地保存图像。我就是这样做的：

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']);
?>

---

如果要保存从Javascript

canvas.toDataURL（）函数派生的数据，必须将空格转换为加号。如果不这样做，则解码数据已损坏：

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



除了萨尔瓦多·达利的回答之外：

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

否则解码将无法工作：图像将被保存，但它将是一个不可读的文件。
将画布图像发送到PHP:

var photo=canvas.toDataURL（'image/jpeg'）；
$.ajax({
方法：“POST”，
url:'photo_upload.php'，
数据：{
照片：照片
}
});

下面是PHP脚本：

photo\u upload.php

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

您可以使用以下代码：

函数dataURLtoBlob（dataURL）{
let数组，二进制，i，len；
binary=atob（dataURL.split（'，）[1]）；
数组=[]；
i=0；
len=二进制长度；
而（我

下面是画布代码：

const canvas=document.getElementById（'canvas'）；
const file=dataURLtoBlob（canvas.toDataURL（））；

之后，您可以将ajax与表单一起使用：

const fd=新表单数据；
fd.append（'图像'，文件）；
$.ajax({
键入：“POST”，
url:“/url以保存”，
数据：fd，
processData:false，
contentType:false
});

---

代码的语法如下：

dataURLtoBlob=（dataURL）->
#解码数据URL
binary=atob（dataURL.split（'，）[1]）
#创建8位无符号数组
数组=[]
i=0
而我

下面是画布代码：

canvas=document.getElementById（'canvas'）
file=dataURLtoBlob（canvas.toDataURL（））

之后，您可以将ajax与表单一起使用：

fd=新表单数据
#将画布图像文件附加到表单数据
fd.append“image”，文件
$.ajax
类型：“POST”
url:“/url保存”
数据：fd
processData:false
contentType:false

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

函数b64ToUint8Array（b64Image）{
var img=atob（b64Image.split（'，'）[1]）；
var img_buffer=[]；
var i=0；
而（i<?php
  $encodedData = str_replace(' ','+',$encodedData);
  $decocedData = base64_decode($encodedData);
?>

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

canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95);

axios.post(azure_sas_url, image_in_blob, {
   headers: {
      'x-ms-blob-type': 'BlockBlob',
      'Content-Type': 'image/jpeg'
   }
})