javascript使用canvas处理保存图片
javascript使用HTML5的canvas对象对图片进行处理,如图像灰度化,图像反转,将整个图像的RGB某一通道样色值设置为某一颜色值 ,图片高亮,去掉图像某一颜色值等常用图像处理。
javascript使用canvas处理图像类库源代码如下
/** * @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();
图像保存
//将图像输出为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中的代码如下
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) { } } }
注意:由于沙箱的限制,想在浏览器端通过JS直接存为本地图片,似乎是不大可能,现在网上较为折中的方式为
window.location.href = "image/octet-stream" + data
但这种方式不能指定保存的文件名,在FF下默认是xxxxx.part。IE9-浏览器也不能通过上诉方式保存图片。
来源:http://blog.csdn.net/northwind_x/article/details/5874680
加支付宝好友偷能量挖...
原创文章,转载请注明出处:javascript使用canvas处理保存图片