HTML5 image effects – horizontal flip. Today we going to continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that you like this too. Today we will be adding new filter – Horizontal Flip.
Here are our demo and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
Here are all html of my demo
index.html
01 | <!DOCTYPE html> |
02 | <html lang="en" > |
03 | <head> |
04 | <meta charset="utf-8" /> |
05 | <title>HTML5 Image Effects App - Adding Horizontal Flip | Script Tutorials</title> |
06 | <link href="css/main.css" rel="stylesheet" type="text/css" /> |
07 | <script type="text/javascript" src="js/script.js"></script> |
08 | </head> |
09 | <body> |
10 | <div class="container"> |
11 | <div class="column1"> |
12 | Reset to:<br /> |
13 | <input type="button" onclick="resetToColor()" value="Color" /> |
14 | <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><hr /> |
15 | Effects:<br /> |
16 | <input type="button" onclick="resetToBlur()" value="1. Blur" /><br /> |
17 | <input type="button" onclick="resetToNoise()" value="2. Add noise" /><br /> |
18 | <input type="button" onclick="resetToInvert()" value="3. Invert colors" /> |
19 | <input type="button" onclick="resetToFlopHor()" value="4. Horizontal Flip" /><hr /> |
20 | Adjustment:<br /> |
21 | <input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br /> |
22 | <input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br /> |
23 | Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" /> |
24 | <input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br /> |
25 | Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" /> |
26 | <input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br /> |
27 | Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" /> |
28 | <input type="button" onclick="changeColorValue('eb', -10)" value="Less" /> |
29 | Blur: <input type="button" onclick="changeBlurValue(1)" value="More" /> |
30 | <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br /> |
31 | </div> |
32 | <div class="column2"> |
33 | <canvas id="orig" width="500" height="333"></canvas> |
34 | <canvas id="panel" width="500" height="333"></canvas> |
35 | </div> |
36 | <div style="clear:both;"></div> |
37 | </div> |
38 | <footer> |
39 | <h2>HTML5 Image Effects App - Adding Horizontal Flip</h2> |
40 | <a href="https://www.script-tutorials.com/html5-image-effects-app-adding-horizontal-flip" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> |
41 | </footer> |
42 | </body> |
43 | </html> |
What I did since last our version: changed main layout a little and add new button for new Horizontal Flip.
Step 2. CSS
Here are used CSS styles.
css/main.css
01 | /* general styles */ |
02 | *{ |
03 | margin:0; |
04 | padding:0; |
05 | } |
06 | body { |
07 | background-color:#bababa; |
08 | background-image: -webkit-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%); |
09 | background-image: -moz-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%); |
10 | background-image: -o-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%); |
11 | background-image: radial-gradient(600px 200px, circle, #ffffff, #bababa 50%); |
12 | color:#fff; |
13 | font:14px/1.3 Arial,sans-serif; |
14 | } |
15 | footer { |
16 | background-color:#212121; |
17 | bottom:0; |
18 | box-shadow: 0 -1px 2px #111111; |
19 | display:block; |
20 | height:70px; |
21 | left:0; |
22 | position:fixed; |
23 | width:100%; |
24 | z-index:100; |
25 | } |
26 | footer h2{ |
27 | font-size:22px; |
28 | font-weight:normal; |
29 | left:50%; |
30 | margin-left:-400px; |
31 | padding:22px 0; |
32 | position:absolute; |
33 | width:540px; |
34 | } |
35 | footer a.stuts,a.stuts:visited{ |
36 | border:none; |
37 | text-decoration:none; |
38 | color:#fcfcfc; |
39 | font-size:14px; |
40 | left:50%; |
41 | line-height:31px; |
42 | margin:23px 0 0 110px; |
43 | position:absolute; |
44 | top:0; |
45 | } |
46 | footer .stuts span { |
47 | font-size:22px; |
48 | font-weight:bold; |
49 | margin-left:5px; |
50 | } |
51 | /* tutorial styles */ |
52 | .container { |
53 | color:#000; |
54 | margin:20px auto; |
55 | position:relative; |
56 | width:730px; |
57 | } |
58 | .column1 { |
59 | float:left; |
60 | padding-right:10px; |
61 | text-align:right; |
62 | width:185px; |
63 | } |
64 | .column2 { |
65 | float:left; |
66 | width:500px; |
67 | background-color:#888; |
68 | padding:10px; |
69 | } |
70 | input[type=button] { |
71 | margin:5px; |
72 | } |
Step 3. JS
As I mentioned in previous article – don`t need to publish whole code here again and again – we will publish only new functions. Here are new function for Horizontal Flip:
js/script.js
01 | function FlipHor() { |
02 | func = 'flip_hor'; // last used function |
03 | var imgd = context.getImageData(0, 0, iW, iH); |
04 | var data = imgd.data; |
05 | var imgd2 = context.getImageData(0, 0, iW, iH); |
06 | var data2 = imgd2.data; |
07 | for (var x = 0; x < iW/2; x++) { |
08 | for (var y = 0; y < iH; y++) { |
09 | var i = (y*iW + x); |
10 | var i2 = (y*iW + ((iW-1)-x)); |
11 | var iP1 = data2[i*4]*p1+er; |
12 | var iP2 = data2[i*4+1]*p2+eg; |
13 | var iP3 = data2[i*4+2]*p3+eb; |
14 | data[i*4] = data[i2*4]*p1+er; // red |
15 | data[i*4+1] = data[i2*4+1]*p2+eg; // green |
16 | data[i*4+2] = data[i2*4+2]*p3+eb; // blue |
17 | data[i2*4] = iP1; // red |
18 | data[i2*4+1] = iP2; // green |
19 | data[i2*4+2] = iP3; // blue |
20 | } |
21 | } |
22 | context.putImageData(imgd, 0, 0); |
23 | } |
Live Demo
Conclusion
Hope that today`s lesson was interesting for you. We added new effect to our application – Horizontal Flip. I will be glad to see your thanks and comments. Good luck!
