网站建设 域名注册,如何做ps4游戏视频网站,广州加盟网站建设,如何用ps做网站uiHTML5中增加的Canvas元素#xff0c;配合JS灵活的语法#xff0c;处理起图片变得异常简单#xff0c;不需要在客户端用C/C 写一大堆代码#xff0c;对于熟悉JS的程序员来说#xff0c;只需要考虑处理图片的逻辑了。 canvas中如果想要处理图片就需要借助ImageData这个对象配合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 (i0; iw; i ) { for (j0; jh; j ) { var index(i*h j) * 4; var redimageData.data[index]; var greenimageData.data[index 1]; var blueimageData.data[index 2]; var alphaimageData.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 j0; jh; j ) { for (var i0; iw; 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 i0; itotal; 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 i0; itotal; i 4 ) { var redimageData.data[i], greenimageData.data[i 1], blueimageData.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 i0; itotal; 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 i0; itotal; 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 i0; itotal; i 4 ) { var redimageData.data[i], greenimageData.data[i 1], blueimageData.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
