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

Posted

技术标签:

【中文标题】如何将 HTML5 Canvas 保存为服务器上的图像?【英文标题】:How to save an HTML5 Canvas as an image on a server? 【发布时间】:2012-10-23 06:47:56 【问题描述】:

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

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

但是,我被困在了第二步。在谷歌的一些帮助下,我找到了这个blog post,这似乎正是我想要的:

这导致了 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);

?>

但这似乎根本没有任何作用。

更多谷歌搜索出现了这个blog post,它基于上一个教程。差别不大,但也许值得一试:

$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'] ***.com/questions/3592164/… Diodeus:我已经在使用该线程中建议的技术;但是,他们未能提供有关实施的任何进一步细节,这就是我陷入困境的地方。 当我回显文件信息(第二个 php 代码中的$data)时,我得到的只是一个空行。为什么会这样?似乎发送的数据可能不正确,但似乎我正在发送它,就像示例显示的那样...... 可以通过使用PHP-FileUpload 及其DataUriUpload 组件来简化PHP 代码并使其更加健壮。它是documented here,并带有几种额外的验证和执行安全性的方法。 【参考方案1】:

我认为您应该将图像转换为 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'
  );
;

这里还有画布代码:

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

【讨论】:

可以直接将画布转换为blob,只需使用:canvas.toBlob。 developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/… 谢谢@Felipe,当我用我当前的演示测试时,我会尽快更新它。【参考方案2】:

以下是如何实现您需要的示例:

    画一些东西(取自canvas tutorial)

<canvas id="myCanvas"  ></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(
      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.
    );
    在你的服务器上保存base64为图像(这里是how to do this in PHP,每种语言的想法都是一样的。PHP中的服务器端可以是found here):

【讨论】:

我的意思是该文件在那里,但如果我下载它,它不会在我的浏览器或任何图像查看器中打开。 You send it to your server as an ajax request 这个方法需要用户确认吗?或者我可以静默地将图像从画布发送到服务器? 我在 Web 控制台上收到错误消息。 [16:53:43.227] SecurityError:操作不安全。 @sharevi.com/staging/canvas.html:43此连接不安全。有什么需要做的吗?/// UPDATE 我想我知道为什么,我使用的是跨域图像 但 alpha 为 0,这使得它没有填充,即完全透明。不管前三个值是什么。【参考方案3】:

我刚刚制作了一个 imageCrop 和上传功能

https://www.npmjs.com/package/react-image-crop

获取 ImagePreview(在画布中呈现裁剪的图像)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

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

我更喜欢使用内容类型为image/jpeg 而不是toDataURL(一个巨大的base64 字符串`

我使用 SAS URL 上传到 Azure Blob 的实现

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

【讨论】:

【参考方案4】:

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

【讨论】:

【参考方案5】:

将画布图像发送到 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;
?>

【讨论】:

【参考方案6】:

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

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

【讨论】:

如果我使用 canvas.toDataURL() 可以吗?我有动态文件扩展名,如 jpeg、png、gif。我试过 canvas.toDataURL('image/jpg') 但它不工作。怎么了? 我在尝试通过 AJAX 从画布发送图像时遇到 413(请求太大)错误。然后这种方法帮助我通过了图像。 有什么理由给我一个 0kb png 文件? 对于 jpg 你需要做 canvas.toDataURL('image/jpeg') - 至少这就是我在 Chrome 上所做的。 谢谢,这正是我需要的:D【参考方案7】:

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

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

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

【讨论】:

【参考方案8】:

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

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

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

【讨论】:

以上是关于如何将 HTML5 Canvas 保存为服务器上的图像?的主要内容,如果未能解决你的问题,请参考以下文章

使用 Java Servlet 保存 HTML5 <canvas> 图像

如何将 HTML5 <canvas> 保存为 ICO 图像(图标文件)或 .cur 文件(静态鼠标光标)而不是 JavaScript 中的 PNG?

如何使用类和函数为html5-canvas上的多个对象设置动画?

HTML5 & Javascript Canvas 游戏 - 如何让玩家能够保存他们的游戏

javascript 网页截图 保存为本地图片

将html转换成canvas