在Web应用程序中使用Canvas API

更多HTML 5文章请查阅HTML 6在线网站http://www.html5online.com.cn

本文概述

    本文介绍如何在一个Web应用程序中利用HTML 5中的Canvas API创建、编辑、打开与输出图像。

检测浏览器是否支持Canvas API
    首先,我们需要检测用户浏览器是否对HTML 5中的Canvas API提供支持。一个简单的方法是利用Modernizr工具来进行检测,方法如下所示。
if (Modernizr.canvas) {
    //浏览器支持Canvas API
} 
else {
    //浏览器不支持Canvas API,使用诸如Flash、静态图片等其他技术
}
    通过URL地址或Data URI指定canvas元素中的图像来源
    在使用Canvas API的时候,我们首先需要在页面上放置一个canvas元素。然后,我们可以在JavaScript脚本代码中将一幅图像绘制在该canvas元素中,代码如下所示。
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = "images/sl.jpg";
img.onload = function () {
    ctx.drawImage(img,0,0);
}
    在这段代码中,我们首先获取页面上canvas元素的图形上下文对象,通过该对象来使用Canvas API中所定义的所有可用于绘图的方法。接下来,我们创建一个Image对象并且将该对象的src属性值定义为canvas元素中所需要绘制图像的URL地址,这将使得所需要绘制的图像将被装载在该Image对象中。当该图像装载完毕后,我们使用canvas元素的图形上下文对象的drawImage方法将该图像绘制在canvas元素中。
    可以将该Image对象的src属性值指定为一个形式为dataURI地址,代码如下所示：
  img.src="data:image/jpeg;base64,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"
    你也许会问:"为什么需要使用dataURI地址?",这是因为dataURI地址有一些自身的优势,例如接下来我们马上要介绍的如何将canvas元素中的图形或图像导出为一个data URI地址。
    将canvas元素中的图像导出为dataURI地址
    canvas元素有一个toDataURL方法,该方法将导出图像的MIME类型作为唯一参数,代码如下所示。
window.open(document.getElementById('canvas').toDataURL("image/jpeg"));
    上面这行代码将canvas元素中的图像导出为一个JPEG格式的图像并且在新的浏览器窗口中打开该图像。浏览器地址栏中显示由canvas元素中的图像生成的data URI地址,浏览器将根据该data URI地址渲染窗口中的图像。但是,对于用户来说就好像在新的浏览器窗口中打开了该图像。
    另外请注意上面这行代码必须被运行在一个Web服务器中。从本地文件系统中直接运行该代码时浏览器将抛出错误。
将canvas元素中的图像存储在客户端本地
    通过HTML 5中提供的各种将数据存储在客户端本地的技术,我们可以很轻松地将canvas元素中的图像存储在客户端本地。
    例如通过如下所示的代码,我们可以将canvas元素中的图像存储在WebStorage中。
localStorage.setItem('canvas', canvas.toDataURL("image/jpeg"));
    通过如下所示的代码,我们可以从WebStorage中取出被保存的图像。
localStorageImage = new Image();
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
localStorageImage.onload = function () 
{
    ctx.drawImage(image,0,0); 
}   
localStorageImage.src = localStorage.getItem('canvas');
    将canvas元素中的图像上传到服务器端
    有时,你可能想将canvas元素中的图像上传到服务器端。这时,我们可以首先利用canvas元素的toDataURL方法将canvas元素中的图像输出为一个data URI地址,然后将该地址上传到服务器端。该地址分为两部分,中间用逗号分割,其中第一部分为“data:”+导出图像的MIME类型+“;base64”,第二部分为一个经过base64编码的字符串,在服务器端将其解码后即得到该图像的原始二进制数据,可以将其保存为图像文件,代码如下所示：
var data=canvas.toDataURL("image/jpeg");
var xhr = new XMLHttpRequest();
xhr.open("POST", "uploadImage.php");
xhr.send(data);
    服务器端保存图像文件的代码如下所示：

$data= $GLOBALS['HTTP_RAW_POST_DATA'];
$contents_split = explode(',',$data);
$encoded = $contents_split[count($contents_split)-1];
$decoded = "";
for ($i=0; $i < ceil(strlen($encoded)/256); $i++) {
    $decoded = $decoded . base64_decode(substr($encoded,$i*256,256));
}
$file=fopen("test.jpg","w");
fwrite($file,$decoded);
fclose($file);
?>