利用HTML5中Canvas处理并存储图片

    

      HTML5中增加的Canvas元素，配合JS灵活的语法，处理起图片变得异常简单，不需要在客户端用C/C++写一大堆代码，对于熟悉JS的程序员来说，只需要考虑处理图片的逻辑了。

 

---

 

      canvas中如果想要处理图片就需要借助ImageData这个对象，就是将画布中某一区域中的图像以RGBA的方式保存下来，存成一个二维数组。

     ctx.getImageData( x, y, w, h) //获取ImageData ctx.putImageData( x, y, w, h) //将ImageData绘在画布上

   

     写了个简单的处理图像的类，可以翻转/灰化/去色/高亮/设单色值

     /** * @author Norris Tong */var PS = function( config ){//$.extend( this, config );return this;}PS.prototype = {//将图像灰化gray: function( ctx, imageData ){var w = imageData.width,h = imageData.height,ret = ctx.createImageData( w, h );for (i=0; i<w; i++){for (j=0; j<h; j++){ var index=(i*h+j) * 4; var red=imageData.data[index]; var green=imageData.data[index+1]; var blue=imageData.data[index+2]; var alpha=imageData.data[index+3]; var average=(red+green+blue)/3; ret.data[index]=average; ret.data[index+1]=average; ret.data[index+2]=average; ret.data[index+3]=alpha; }}return ret;},// 生成ImageDatacreateImageData: function( ctx, ori, from, w, h ){varret = ctx.createImageData( w, h );var total = w * h * 4;from = from * w * 4;for (var i= 0 ; i< total; i++) {ret.data[ i ] = ori.data[ from + i ];}return ret;},//生成ImageData//对称图像反转 createImageDataTurn: function( ctx, ori, from, w, h ){varret = ctx.createImageData( w, h );var total = w * h * 4;from = from * w * 4;for (var j=0; j<h; j++) {for (var i=0; i<w; i++) {var a = (j * w + i) * 4,b = from + a,c = (j * w + w- i) * 4;ret.data[ c++ ] = ori.data[ b++ ];ret.data[ c++ ] = ori.data[ b++ ];ret.data[ c++ ] = ori.data[ b++ ];ret.data[ c++ ] = ori.data[ b++ ];}}return ret;},//将整个图片设置为某一颜色值 setColorR: function( ctx, imageData, n ){var w = imageData.width,h = imageData.height,ret = ctx.createImageData( w, h );var total = w * h * 4;for (var i=0; i<total; i +=4 ) {ret.data[i] = n; // imageData[ i ]; ret.data[i+1]= imageData.data[ i + 1 ]; ret.data[i+2]= imageData.data[ i + 2 ]; ret.data[ i+3]= imageData.data[ i + 3 ];}return ret;},//将整个图片设置为某一颜色值 setColorG: function( ctx, imageData, n ){var w = imageData.width,h = imageData.height,ret = ctx.createImageData( w, h );var total = w * h * 4;for (var i=0; i<total; i +=4 ) {var red=imageData.data[i], green=imageData.data[i+1], blue=imageData.data[i+2];var a = (red + green + blue) / 3;ret.data[i] = a; ret.data[i+1]= a + n; ret.data[i+2]= a; ret.data[ i+3]= imageData.data[ i + 3 ];}return ret;},//将整个图片设置为某一颜色值 setColorB: function( ctx, imageData, n ){var w = imageData.width,h = imageData.height,ret = ctx.createImageData( w, h );var total = w * h * 4;for (var i=0; i<total; i +=4 ) {ret.data[i] = imageData.data[ i ]; ret.data[i+1]= imageData.data[ i + 1 ]; ret.data[i+2]= n; ret.data[ i+3]= imageData.data[ i + 3 ];}return ret;},//高亮整个图片 highlight: function( ctx, imageData, n ){var w = imageData.width,h = imageData.height,ret = ctx.createImageData( w, h );var total = w * h * 4;for (var i=0; i<total; i +=4 ) {ret.data[i] = imageData.data[ i ] + n; ret.data[i+1]= imageData.data[ i + 1 ] + n; ret.data[i+2]= imageData.data[ i + 2 ] + n; ret.data[ i+3]= imageData.data[ i + 3 ];}return ret;},//去色 紫色 247, 0, 255 removeColor: function( ctx, imageData, r, g, b ){var w = imageData.width,h = imageData.height,ret = ctx.createImageData( w, h );var total = w * h * 4;for (var i=0; i<total; i +=4 ) {var red=imageData.data[i], green=imageData.data[i+1], blue=imageData.data[i+2];//相等则全透明if ( r == red && green == g && blue == b ){ret.data[ i+3]= 0;}else{ret.data[i] = red; ret.data[i+1]= green; ret.data[i+2]= blue; ret.data[ i+3]= imageData.data[ i + 3 ];}}return ret;}};PS = new PS();

 

     通过一系列操作，渲染好图像后，就需要借助如下的代码将画布中的图像保存成图片

     //将图像输出为base64压缩的字符串 默认为image/pngvar data = canvas.toDataURL(); //删除字符串前的提示信息 "data:image/png;base64,"var b64 = data.substring( 22 );//POST到服务器上，生成图片 $.post( "save.aspx" , { data : b64, name : filename }, function(){ //OK});

    

    save.aspx中的代码如下：

    protected void Page_Load(object sender, EventArgs e) { if (Request["name"] != null) { string name = Request["name"]; String savePath = Server.MapPath("~/images/output/"); try { FileStream fs = File.Create(savePath + "/" + name); byte[] bytes = Convert.FromBase64String(Request["data"]); fs.Write(bytes, 0, bytes.Length); fs.Close(); } catch (Exception except) { } } }

 

   PS: 由于沙箱的限制，想在浏览器端通过JS直接存为本地图片，似乎是不大可能，现在网上较为折中的方式为

   window.location.href = "image/octet-stream" + data

   但这种方式不能指定保存的文件名，在FF下默认是xxxxx.part

   参照 ： http://www.nihilogic.dk/labs/canvas2image/