Using the HTML5 Canvas processed and stored in pictures

HTML 5 Canvas element in the increase, with JS flexible syntax, the picture processing from easy, with no need to write a lot of code on the client using C / C ++, for those familiar with the JS programmers only need to consider treatment the logic of the picture.

If you want the canvas with pictures ImageData needs to use this object, the canvas is to a certain area of ​​the image to RGBA way preserved, saved as a two-dimensional array.

JavaScript code is copied to the clipboard

1. ctx.getImageData (X, Y, W, H) / / acquired ImageData  
2. ctx.putImageData (X, Y, W, H) / / a is plotted on the canvas ImageData  

Write a simple processing based image may be flipped / ashing / to color / highlight / monochrome setting value

JavaScript code is copied to the clipboard

1. / **
2. * @ Author Norris Hall
3. * /  
4. Var PS = function (configuration) {  
5. / / $ Extension (this configuration);  
6. Return this;  
7. }  
8. PS.prototype = {  
9. / / Image ashing  
10. Gray: Function (CTX, as imageData) {  
11. 无功  W = imageData.width，  
12. H = imageData.height，  
13. RET = ctx.createImageData（W，H）;  
14. For (I = 0; I
15. {  
16. It is (J = 0; Ĵ
17. {  
18. Var index = (I * High + J) * 4;  
19. Reactive Red = imageData.data [index];  
20. Var green = imageData.data [index 1];  
21. Reactive Blue = imageData.data [index 2];  
22. Reactive letters = imageData.data [index 3];  
23. Average = var (Red + Green + Blue) / 3;  
24. ret.data [Index] = average;  
25. ret.data [index 1] = average;  
26. ret.data [index 2] = average;  
27. ret.data [index 3] = alpha;  
28. }  
29. }  
30. Return RET;  
31. }，  
32. / / Generated ImageData  
33. The createImageData: function (CTX, ORI, from, W, H) {  
34. 无功  RET = ctx.createImageData（W，H）;  
35. Total reactive = W * H * 4;  
36. = W * from the * 4;  
37. Is (I = 0 var I "always, i ++) {  
38. ret.data reason [i] = ori.data [从 + I];  
39. }  
40. Return RET;  
41. }，  
42. / / Generated ImageData  
43. / / Image reversal symmetry  
44. createImageDataTurn: function (CTX, ORI, from, W, H) {  
45. 无功  RET = ctx.createImageData（W，H）;  
46. Total reactive = W * H * 4;  
47. = W * from the * 4;  
48. It is (var J = 0; Ĵ
49. As (var I = 0; I
50. Var A = (ten * W + I) * 4,  
51. From B = + A,  
52. C = (ten * 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. Return RET;  
60. }，  
61. / / The whole picture as a color value  
62. setColorR: function (CTX, as in imageData, n) {  
63. 无功  W = imageData.width，  
64. H = imageData.height，  
65. RET = ctx.createImageData（W，H）;  
66. Total reactive = W * H * 4;  
67. As (var I = 0; I
68. ret.data a [i] = N; / / to imageData [I];  
69. ret.data [I +1] = imageData.data reason [i +1];  
70. ret.data [I 2] = imageData.data [I + 2];  
71. ret.data [I +3] = imageData.data [I + 3];  
72. }  
73. Return RET;  
74. }，  
75. / / The whole picture as a color value  
76. setColorG: function (CTX, as in imageData, n) {  
77. 无功  W = imageData.width，  
78. H = imageData.height，  
79. RET = ctx.createImageData（W，H）;  
80. Total reactive = W * H * 4;  
81. As (var I = 0; I
82. Reactive Red = imageData.data [I],  
83. Green = imageData.data [I +1],  
84. Blue = imageData.data a [i +1];  
85. Var A = (Red + Green + Blue) / 3;  
86. ret.data reason [i] = A;  
87. ret.data reason [i +1] = A + N;  
88. ret.data [I 2] = a;  
89. ret.data [I +3] = imageData.data [I + 3];  
90. }  
91. Return RET;  
92. }，  
93. / / The whole picture as a color value  
94. setColorB: function (CTX, as in imageData, n) {  
95. 无功  W = imageData.width，  
96. H = imageData.height，  
97. RET = ctx.createImageData（W，H）;  
98. Total reactive = W * H * 4;  
99. As (var I = 0; I
100. ret.data reason [i] = imageData.data reason [i];  
101. ret.data [I +1] = imageData.data reason [i +1];  
102. ret.data [I 2] = N;  
103. ret.data [I +3] = imageData.data [I + 3];  
104. }  
105. Return RET;  
106. }，  
107. / / To highlight the entire picture  
108. Projection: function (CTX, as imageData, N) {  
109. 无功  W = imageData.width，  
110. H = imageData.height，  
111. RET = ctx.createImageData（W，H）;  
112. Total reactive = W * H * 4;  
113. As (var I = 0; I
114. ret.data reason [i] = imageData.data reason [i] + N;  
115. ret.data reason [i +1] = imageData.data reason [i +1] + N;  
116. ret.data reason [i +1] = imageData.data [I + 2] + N;  
117. ret.data [I +3] = imageData.data [I + 3];  
118. }  
119. Return RET;  
120. }，  
121. / / Purple color to 247,0,255  
122. removeColor: function (CTX, as imageData, R, G, B) {  
123. 无功  W = imageData.width，  
124. H = imageData.height，  
125. RET = ctx.createImageData（W，H）;  
126. Total reactive = W * H * 4;  
127. As (var I = 0; I
128. Reactive Red = imageData.data [I],  
129. Green = imageData.data [I +1],  
130. Blue = imageData.data a [i +1];  
131. / / Are equal transparent  
132. If the correlation (R & lt == == g && && red green blue == b) {  
133. ret.data reason [i +3] = 0;  
134. } Else {  
135. ret.data a [i] = red;  
136. ret.data a [i +1] = green;  
137. ret.data a [i +1] = blue;  
138. ret.data [I +3] = imageData.data [I + 3];  
139. }  
140. }  
141. Return RET;  
142. }  
143. };  
144. The PS PS = new ();  

Through a series of operations, after rendering a good image, we need to use the following code saves the image to the canvas picture

JavaScript code is copied to the clipboard

1. / / Outputs the image of the compressed base64 string Default image / PNG  
2. Var data = canvas.toDataURL ();  
3. / / Message before deleting a string "data: image / PNG; the base64"  
4. Variant B64 = data.substring (22);  
5. / / POST to the server, generates pictures  
6. After $ ( "save.aspx", {data: B64, name: filename}, function () {  
7. / / OK  
8. }）;  

Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.

save.aspx code as follows:

JavaScript code is copied to the clipboard

1. Protected void of Page_Load (object sender, EventArgs sent)  
2. {  
3. If (Request [ "name"]! = Null)  
4. {  
5. Request String name = [ "name"];  
6. Use string SAVEPATH = Server.Mappath ( "~ / video / output /");  
7. try  
8. {  
9. The FileStream FS = File.Create (SAVEPATH + "/" + name);  
10. Byte [] bytes = Convert.FromBase64String (Request [ "data"]);  
11. fs.Write (bytes, 0, bytes.Length);  
12. fs.Close（）;  
13. }  
14. Catch (subject to exceptions)  
15. {  
16. }  
17. }  
18. }  

PS: Due to limitations of the sandbox, want to deposit directly to the local picture by JS on the browser side, it seems unlikely that, now more eclectic way for online

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

However, this method can not specify where to save the file name, the default in the FF is xxxxx.part