如何在HTML5画布保存为图像的服务器上 [英] How to save a HTML5 Canvas as Image on a server

问题描述

我工作的一个生成艺术项目，我想允许用户从一个算法保存生成的图像。总的思路是：

I'm working on a generative art project where I would like to allow users to save the resulting images from an algorithm. The general idea is:

*创建使用生成算法的HTML5画布图像 *当图像完成时，允许用户到画布保存为图像文件到服务器 *允许用户无论是下载的图像或将其添加到使用算法产生件的画廊。

*create an image on HTML5 Canvas using generative algorithm *when the image is completed, allow user to save the canvas as an image file to server *Allow the user to either download the image or add it to a gallery of pieces of produced using the algorithm.

不过，我卡上的第二个步骤:(刚开始我在上个月的JavaScript编程，并与PHP / AJAX的经验非常少，但认为（也许）这是一个合理的计划来学习他们通过。

However, I'm stuck on the second step :( I just started javascript programming in the last month and have very little experience with php/AJAX, but thought that (perhaps) this was a reasonable project to learn them through.

在从谷歌一些帮助，我发现这个的博客文章，这似乎正是我想要的：

After some help from google, I found this blog post, which seemed to be exactly what I wanted:

而导致javscript code：

Which led to the javscript code:

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

and corresponding 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 );
}
?>

不过，这似乎并没有做任何事情：（

But this doesn't seem to do anything at all :(

更多谷歌搜索变成了这个<一个href="http://www.kevinsookocheff.com/2011/07/27/saving-canvas-data-to-an-image-file-with-javascript-and-php/">blog帖子：

More googling turns up this blog post:

这是基于关闭previous教程。差别不大，但也许值得一试：

Which is based off of the previous tutorial. Not very different, but perhaps worth a try:

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

这一次创建一个文件（耶！），但它的损坏，并且似乎并没有包含任何内容。这也显示为空（0文件大小）...

This one creates a file (yay!) but its corrupted and doesn't seem to contain anything. It also appears to be empty (file size of 0)...

这有什么真的很明显，我做错了什么？在那里我存储我的文件的路径是可写的，所以这不是一个问题......但似乎没有任何要发生的事情，我真的不知道如何调试这一点。

Is there anything really obvious that I'm doing wrong? The path where I'm storing my file is writable, so that isn't an issue... but nothing seems to be happening and I'm not really sure how to debug this.

编辑：

随着Salvidor大理的链接，我改变了Ajax请求是：

Following Salvidor Dali's link I changed the ajax request to be:

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的形式urlen $ C $光盘允许图像数据的发送。

And now the image file is created and isn't empty! It seems as if the content type matters and that changing it to x-www-form-urlencoded allowed the image data to be sent.

控制台返回的base64 code中的（相当大），字符串和数据文件是〜140 KB。但是，我还是不能打开它，它似乎没有被格式化为一个图像：（

The console returns the (rather large) string of base64 code and the datafile is ~140 kB. However, I still can't open it and it seems to not be formatted as an image :(

推荐答案

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

Here is an example how to achieve what you need:

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您的服务器上的图片（这里是<一个href="http://stackoverflow.com/questions/1532993/i-have-a-base64-en$c$cd-png-how-do-i-write-the-image-to-a-file-in-php">how要做到这一点在PHP ，同样的想法是在每一种语言。在PHP服务器端可以的这里找到）：

3) Save base64 on your server as an image (here is how to do this in PHP, the same ideas is in every language. Server side in PHP can be found here):

这篇关于如何在HTML5画布保存为图像的服务器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！