HTML5中增加的Canvas元素,配合JS灵活的语法,处理起图片变得异常简单,不需要在客户端用C/C++写一大堆代码,对于熟悉JS的程序员来说,只需要考虑处理图片的逻辑了。
canvas中如果想要处理图片就需要借助ImageData这个对象,就是将画布中某一区域中的图像以RGBA的方式保存下来,存成一个二维数组。
JavaScript Code复制内容到剪贴板
- ctx.getImageData( x, y, w, h) //获取ImageData
- ctx.putImageData( x, y, w, h) //将ImageData绘在画布上
写了个简单的处理图像的类,可以翻转/灰化/去色/高亮/设单色值
JavaScript Code复制内容到剪贴板
- /**
- * @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 Code复制内容到剪贴板
- //将图像输出为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 Code复制内容到剪贴板
- 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
什么代码
不错,就是代码有点长!
不错不错
学习了!
学习了,虽然代码有点长
这个有用啊! 处理图片很好!
不错!CANVAS 处理图片的速度不怎么样!