当前位置：首页 > 前端开发 > HTML/HTML5 > 正文

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

来源 : 作者 : admin 人气指数 :
评论 收藏
导语 HTML5中增加的Canvas元素，配合JS灵活的语法，处理起图片变得异常简单，不需要在客户端用C C++写一大堆代码，对于熟悉JS的程序员来说，只需要考虑处理图片的逻辑了。canvas中如果想要处理图片就需要借助ImageDat

HTML5中增加的Canvas元素，配合JS灵活的语法，处理起图片变得异常简单，不需要在客户端用C/C++写一大堆代码，对于熟悉JS的程序员来说，只需要考虑处理图片的逻辑了。

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

JavaScript代码复制内容到剪贴板
  1. ctx.getImageData（X，Y，W，H）       / /获取的ImageData  
  2. ctx.putImageData（X，Y，W，H）      / /将的ImageData绘在画布上  

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

JavaScript代码复制内容到剪贴板
  1. / **
  2. * @作者诺里斯堂
  3. * /  
  4. 变种  PS =  功能（配置）{  
  5. / / $扩展（这一点，配置）;  
  6. 返回 此 ;  
  7. }  
  8. PS.prototype = {  
  9. / /将图像灰化  
  10. 灰色：  功能（CTX，为imageData）{  
  11. 无功  W = imageData.width，  
  12. H = imageData.height，  
  13. RET = ctx.createImageData（W，H）;  
  14. 对  （我= 0;我
  15. {  
  16. 为  （J = 0;Ĵ
  17. {  
  18. 无功  指数=（I *高+ J）* 4;  
  19. 无功  红= imageData.data [指数];  
  20. 变种  绿色= imageData.data [索引1];  
  21. 无功  蓝色= imageData.data [索引2];  
  22. 无功  字母= imageData.data [指数3];  
  23. 变种  平均=（红+绿+蓝）/ 3;  
  24. ret.data [索引] =平均值;  
  25. ret.data [索引1] =平均值;  
  26. ret.data [索引2] =平均值;  
  27. ret.data [指数3] =阿尔法;  
  28. }  
  29. }  
  30. 返回  RET;  
  31. }，  
  32. / /生成的ImageData  
  33. 了createImageData：  函数（CTX，ORI，从，W，H）{  
  34. 无功  RET = ctx.createImageData（W，H）;  
  35. 无功  总= W * H * 4;  
  36. 从=从*宽* 4;  
  37. 为  （变种  I = 0我“总，我+ +）{  
  38. ret.data由[i] = ori.data [从+ I];  
  39. }  
  40. 返回  RET;  
  41. }，  
  42. / /生成的ImageData  
  43. / /对称图像反转  
  44. createImageDataTurn：  函数（CTX，ORI，从，W，H）{  
  45. 无功  RET = ctx.createImageData（W，H）;  
  46. 无功  总= W * H * 4;  
  47. 从=从*宽* 4;  
  48. 为  （变种  J = 0;Ĵ
  49. 为  （变种  I = 0;我
  50. 变种   A =（十* W + I）* 4，  
  51. B =从+ A，  
  52. C =（十* W + W-1）* 4;  
  53. ret.data [C + +] = ori.data [B + +];  
  54. ret.data [C + +] = ori.data [B + +];  
  55. ret.data [C + +] = ori.data [B + +];  
  56. ret.data [C + +] = ori.data [B + +];  
  57. }  
  58. }  
  59. 返回  RET;  
  60. }，  
  61. / /将整个图片设置为某一颜色值  
  62. setColorR：  函数（CTX，为imageData中，n）{  
  63. 无功  W = imageData.width，  
  64. H = imageData.height，  
  65. RET = ctx.createImageData（W，H）;  
  66. 无功  总= W * H * 4;  
  67. 为  （变种  I = 0;我
  68. ret.data由[i] = N;  / /为imageData [I];  
  69. ret.data [I +1] = imageData.data由[i +1];  
  70. ret.data [I 2] = imageData.data [I + 2];  
  71. ret.data [I +3] = imageData.data [I + 3];  
  72. }  
  73. 返回  RET;  
  74. }，  
  75. / /将整个图片设置为某一颜色值  
  76. setColorG：  函数（CTX，为imageData中，n）{  
  77. 无功  W = imageData.width，  
  78. H = imageData.height，  
  79. RET = ctx.createImageData（W，H）;  
  80. 无功  总= W * H * 4;  
  81. 为  （变种  I = 0;我
  82. 无功  红= imageData.data [I]，  
  83. 绿色= imageData.data [I +1]，  
  84. 蓝色= imageData.data由[i +1];  
  85. 变种  A =（红+绿+蓝）/ 3;  
  86. ret.data由[i] = A;  
  87. ret.data由[i +1] = A + N;  
  88. ret.data [I 2] =一;  
  89. ret.data [I +3] = imageData.data [I + 3];  
  90. }  
  91. 返回  RET;  
  92. }，  
  93. / /将整个图片设置为某一颜色值  
  94. setColorB：  函数（CTX，为imageData中，n）{  
  95. 无功  W = imageData.width，  
  96. H = imageData.height，  
  97. RET = ctx.createImageData（W，H）;  
  98. 无功  总= W * H * 4;  
  99. 为  （变种  I = 0;我
  100. ret.data由[i] = imageData.data由[i];  
  101. ret.data [I +1] = imageData.data由[i +1];  
  102. ret.data [I 2] = N;  
  103. ret.data [I +3] = imageData.data [I + 3];  
  104. }  
  105. 返回  RET;  
  106. }，  
  107. / /高亮整个图片  
  108. 突出：  函数（CTX，为imageData，N）{  
  109. 无功  W = imageData.width，  
  110. H = imageData.height，  
  111. RET = ctx.createImageData（W，H）;  
  112. 无功  总= W * H * 4;  
  113. 为  （变种  I = 0;我
  114. ret.data由[i] = imageData.data由[i] + N;  
  115. ret.data由[i +1] = imageData.data由[i +1] + N;  
  116. ret.data由[i +1] = imageData.data [I + 2] + N;  
  117. ret.data [I +3] = imageData.data [I + 3];  
  118. }  
  119. 返回  RET;  
  120. }，  
  121. / /去色紫色247，0，255  
  122. removeColor：  函数（CTX，为imageData，R，G，B）{  
  123. 无功  W = imageData.width，  
  124. H = imageData.height，  
  125. RET = ctx.createImageData（W，H）;  
  126. 无功  总= W * H * 4;  
  127. 为  （变种  I = 0;我
  128. 无功  红= imageData.data [I]，  
  129. 绿色= imageData.data [I +1]，  
  130. 蓝色= imageData.data由[i +1];  
  131. / /相等则全透明  
  132. 如果  相关（r == &&红色绿色==克&&蓝色==二）{  
  133. ret.data由[i +3] = 0;  
  134. } 否则 {  
  135. ret.data由[i] =红色;  
  136. ret.data由[i +1] =绿色;  
  137. ret.data由[i +1] =蓝色;  
  138. ret.data [I +3] = imageData.data [I + 3];  
  139. }  
  140. }  
  141. 返回  RET;  
  142. }  
  143. };  
  144. PS =  新  的PS（）;  

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

JavaScript代码复制内容到剪贴板
  1. / /将图像输出为base64的压缩的字符串默认为图像/ PNG  
  2. 无功  数据= canvas.toDataURL（）;  
  3. / /删除字符串前的提示信息“的数据：图像/ PNG;的base64”  
  4. 变种  B64 = data.substring（22）;  
  5. / / POST到服务器上，生成图片  
  6. $后（“save.aspx”，{数据：B64，名：文件名​​}，  函数（）{  
  7. / / OK  
  8. }）;  

save.aspx中的代码如下：

JavaScript代码复制内容到剪贴板
  1. 保护 无效  的Page_Load（对象发件人，EventArgs的发送）  
  2. {  
  3. 如果  （请求[ “名称” ]！=  空）  
  4. {  
  5. 字符串名称=请求[ “名称” ];  
  6. 串SAVEPATH =使用Server.Mappath（“～/影像/输出/”）;  
  7. 尝试  
  8. {  
  9. 的FileStream FS = File.Create（SAVEPATH +“/”+名称）;  
  10. 字节 []字节= Convert.FromBase64String（请求[ “数据” ]）;  
  11. fs.Write（字节数，0，bytes.Length）;  
  12. fs.Close（）;  
  13. }  
  14. 赶上  （例外情况除外）  
  15. {  
  16. }  
  17. }  
  18. }  

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

window.location.href =“图像/八位字节流”+数据

但这种方式不能指定保存的文件名，在FF下默认是xxxxx.part
http://www.aseoe.com/ true 利用HTML5中Canvas处理并存储图片 http://www.aseoe.com/show-10-289-1.html report <？php echo strlen($content) / 2; ?> HTML5中增加的Canvas元素，配合JS灵活的语法，处理起图片变得异常简单，不需要在客户端用C C++写一大堆代码，对于熟悉JS的程序员来说，只需要考虑处理图片的逻辑了。canvas中如果想要处理图片就需要借助ImageDat
TAG:HTML5
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-10-289-1.html
相关文章 热门推荐 新闻资讯 经典语录
做一枚全栈工程师 学UI设计要分清哪些术语
一名前端工程师的自检清单 如何用JS实现“划词高亮标记”的在线笔记..
多个跨云服务器之间满带宽测速的实现方案 第三届世界互联网大会在乌镇拉开帷幕
身不由己有人怜，己不惜身无人悯。 2020年最重要的10项工作技能
Web前端专题 >> Web前端社区 >>

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)