利用HTML5中Canvas处理并存储图片

论坛 › 期权论坛 › 脚本     
匿名技术用户   2021-1-5 04:54   59   0
HTML5中增加的Canvas元素，配合JS灵活的语法，处理起图片变得异常简单，不需要在客户端用C/C++写一大堆代码，对于熟悉JS的程序员来说，只需要考虑处理图片的逻辑了。

canvas中如果想要处理图片就需要借助ImageData这个对象，就是将画布中某一区域中的图像以RGBA的方式保存下来，存成一个二维数组。

view plain copy to clipboard print ?
  1. ctx.getImageData( x, y, w, h) //获取ImageData
  2. ctx.putImageData( x, y, w, h) //将ImageData绘在画布上

写了个简单的处理图像的类，可以翻转/灰化/去色/高亮/设单色值

view plain copy to clipboard print ?
  1. /**
  2. * @author Norris Tong
  3. */
  5. var PS = function( config ){
  6. //$.extend( this, config );
  7. return this;
  8. }
  10. PS.prototype = {
  12. //将图像灰化
  13. gray : function( ctx, imageData ){
  14. var w = imageData.width,
  15. h = imageData.height,
  16. ret = ctx.createImageData( w, h );
  18. for (i=0; i<w; i++)
  19. {
  20. for (j=0; j<h; j++)
  21. {
  22. var index=(i*h+j) * 4;
  24. var red=imageData.data[index];
  25. var green=imageData.data[index+1];
  26. var blue=imageData.data[index+2];
  27. var alpha=imageData.data[index+3];
  29. var average=(red+green+blue)/3;
  31. ret.data[index]=average;
  32. ret.data[index+1]=average;
  33. ret.data[index+2]=average;
  34. ret.data[index+3]=alpha;
  35. }
  36. }
  38. return ret;
  39. },
  41. // 生成ImageData
  42. createImageData : function( ctx, ori, from, w, h ){
  43. var ret = ctx.createImageData( w, h );
  44. var total = w * h * 4;
  45. from = from * w * 4;
  46. for (var i= 0 ; i< total; i++) {
  47. ret.data[ i ] = ori.data[ from + i ];
  48. }
  50. return ret;
  51. },
  53. //生成ImageData
  54. //对称图像反转
  55. createImageDataTurn : function( ctx, ori, from, w, h ){
  56. var ret = ctx.createImageData( w, h );
  57. var total = w * h * 4;
  58. from = from * w * 4;
  59. for (var j=0; j<h; j++) {
  60. for (var i=0; i<w; i++) {
  61. var a = (j * w + i) * 4,
  62. b = from + a,
  63. c = (j * w + w- i) * 4;
  65. ret.data[ c++ ] = ori.data[ b++ ];
  66. ret.data[ c++ ] = ori.data[ b++ ];
  67. ret.data[ c++ ] = ori.data[ b++ ];
  68. ret.data[ c++ ] = ori.data[ b++ ];
  69. }
  70. }
  72. return ret;
  73. },
  75. //将整个图片设置为某一颜色值
  76. setColorR : function( ctx, imageData, n ){
  77. var w = imageData.width,
  78. h = imageData.height,
  79. ret = ctx.createImageData( w, h );
  81. var total = w * h * 4;
  83. for (var i=0; i<total; i +=4 ) {
  85. ret.data[i] = n; // imageData[ i ];
  86. ret.data[i+1]= imageData.data[ i + 1 ];
  87. ret.data[i+2]= imageData.data[ i + 2 ];
  88. ret.data[ i+3]= imageData.data[ i + 3 ];
  89. }
  91. return ret;
  92. },
  94. //将整个图片设置为某一颜色值
  95. setColorG : function( ctx, imageData, n ){
  96. var w = imageData.width,
  97. h = imageData.height,
  98. ret = ctx.createImageData( w, h );
  100. var total = w * h * 4;
  102. for (var i=0; i<total; i +=4 ) {
  103. var red=imageData.data[i],
  104. green=imageData.data[i+1],
  105. blue=imageData.data[i+2];
  107. var a = (red + green + blue) / 3;
  109. ret.data[i] = a;
  110. ret.data[i+1]= a + n;
  111. ret.data[i+2]= a;
  112. ret.data[ i+3]= imageData.data[ i + 3 ];
  113. }
  115. return ret;
  116. },
  118. //将整个图片设置为某一颜色值
  119. setColorB : function( ctx, imageData, n ){
  120. var w = imageData.width,
  121. h = imageData.height,
  122. ret = ctx.createImageData( w, h );
  124. var total = w * h * 4;
  126. for (var i=0; i<total; i +=4 ) {
  128. ret.data[i] = imageData.data[ i ];
  129. ret.data[i+1]= imageData.data[ i + 1 ];
  130. ret.data[i+2]= n;
  131. ret.data[ i+3]= imageData.data[ i + 3 ];
  132. }
  134. return ret;
  135. },
  137. //高亮整个图片
  138. highlight : function( ctx, imageData, n ){
  139. var w = imageData.width,
  140. h = imageData.height,
  141. ret = ctx.createImageData( w, h );
  143. var total = w * h * 4;
  145. for (var i=0; i<total; i +=4 ) {
  147. ret.data[i] = imageData.data[ i ] + n;
  148. ret.data[i+1]= imageData.data[ i + 1 ] + n;
  149. ret.data[i+2]= imageData.data[ i + 2 ] + n;
  150. ret.data[ i+3]= imageData.data[ i + 3 ];
  151. }
  153. return ret;
  154. },
  156. //去色 紫色 247, 0, 255
  157. removeColor : function( ctx, imageData, r, g, b ){
  158. var w = imageData.width,
  159. h = imageData.height,
  160. ret = ctx.createImageData( w, h );
  162. var total = w * h * 4;
  164. for (var i=0; i<total; i +=4 ) {
  165. var red=imageData.data[i],
  166. green=imageData.data[i+1],
  167. blue=imageData.data[i+2];
  169. //相等则全透明
  170. if ( r == red && green == g && blue == b ){
  171. ret.data[ i+3]= 0;
  172. }else{
  173. ret.data[i] = red;
  174. ret.data[i+1]= green;
  175. ret.data[i+2]= blue;
  176. ret.data[ i+3]= imageData.data[ i + 3 ];
  177. }
  178. }
  180. return ret;
  181. }
  183. };
  185. PS = new PS();

通过一系列操作，渲染好图像后，就需要借助如下的代码将画布中的图像保存成图片

view plain copy to clipboard print ?
  1. //将图像输出为base64压缩的字符串 默认为image/png
  2. var data = canvas.toDataURL();
  3. //删除字符串前的提示信息 "data:image/png;base64,"
  4. var b64 = data.substring( 22 );
  5. //POST到服务器上，生成图片
  6. $.post( "save.aspx" , { data : b64, name : filename }, function(){
  7. //OK
  8. });

save.aspx中的代码如下：

view plain copy to clipboard print ?
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (Request["name"] != null)
  4. {
  5. string name = Request["name"];
  7. String savePath = Server.MapPath("~/images/output/");
  9. try
  10. {
  11. FileStream fs = File.Create(savePath + "/" + name);
  13. byte[] bytes = Convert.FromBase64String(Request["data"]);
  15. fs.Write(bytes, 0, bytes.Length);
  16. fs.Close();
  17. }
  18. catch (Exception except)
  19. {
  20. }
  22. }
  23. }

PS: 由于沙箱的限制，想在浏览器端通过JS直接存为本地图片，似乎是不大可能，现在网上较为折中的方式为

window.location.href = "image/octet-stream" + data

但这种方式不能指定保存的文件名，在FF下默认是xxxxx.part

参照 ： http://www.nihilogic.dk/labs/canvas2image/

来处:http://blog.csdn.net/northwind_x/archive/2010/09/10/5874680.aspx


回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16级独孤
匿名技术用户

积分:7942463
帖子:1588486
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP