html5 canvas图像保存为图片文件

利用html5 canvas定义图形绘制图像时，如何将源图像保存为图片？

     首先，其api中提供了toDataURL()方法，可将canvas图像保存为二进制文件：

      var dataURL =canvas.toDataURL();

      document.getElementById('canvasImg').src= dataURL;

     当然我们也可以直接通过image/octet-stream方式下载：

      var data =canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

     window.location.href = data;

     但是，这种方式只能按二进制保存，无法保存为指定类型的文件，比如xxx.png；要直接保存为文件xxx.png，单独在客户端是无法实现的。目前，只能先将该二进制数据发送到服务器端，然后再返回传给客户端供下载。

具体如下：

1.将canvas图像源数据上传到服务器：

    var canvasData = testCanvas.toDataURL("image/png");//jpg等格式类似

    var ajax =new XMLHttpRequest();

   ajax.open("POST",'save.php',true);

   ajax.setRequestHeader('Content-Type','application/upload');

   ajax.send(canvasData);

2.save.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( 'test.png', 'wb' );

fwrite( $fp, $unencodedData);

fclose( $fp );

}

具体可参看：http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/