HTML5中增加的Canvas元素，配合JS靈活的語法，處理起圖片變得異常簡單，不需要在客戶端用C/C 寫一大堆代碼，對于熟悉JS的程序員來說，只需要考慮處理圖片的邏輯了。

canvas中如果想要處理圖片就需要借助ImageData這個對象，就是將畫布中某一區域中的圖像以RGBA的方式保存下來，存成一個二維數組。

JavaScript
ctx.getImageData( x, y, w, h)????? //獲取ImageData?
ctx.putImageData( x, y, w, h)???? //將ImageData繪在畫布上?
寫了個簡單的處理圖像的類，可以翻轉/灰化/去色/高亮/設單色值

JavaScript
/**
* @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;?
},?
// 生成ImageData?
createImageData : function( ctx, ori, from, w, h ){?
var ret = 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 ){?
var ret = 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();?
通過一系列操作，渲染好圖像后，就需要借助如下的代碼將畫布中的圖像保存成圖片

JavaScript
//將圖像輸出為base64壓縮的字符串? 默認為image/png?
var data = canvas.toDataURL();?
//刪除字符串前的提示信息 ”data:image/png;base64,”?
var b64 = data.substring( 22 );?
//POST到服務器上，生成圖片?
$.post( ”save.aspx” , { data : b64, name : filename }, function(){?
//OK?
});?
save.aspx中的代碼如下：

JavaScript
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

總結

以上是生活随笔為你收集整理的在HTML5中如何利用Canvas处理并存储图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。