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处理保存图片

评论(0)Web开发网
阅读(221)喜欢(0)JavaScript/Ajax开发技巧