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
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 Image Effects App - Adding Horizontal Flip | Script Tutorials</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="container"> <div class="column1"> Reset to:<br /> <input type="button" onclick="resetToColor()" value="Color" /> <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><hr /> Effects:<br /> <input type="button" onclick="resetToBlur()" value="1. Blur" /><br /> <input type="button" onclick="resetToNoise()" value="2. Add noise" /><br /> <input type="button" onclick="resetToInvert()" value="3. Invert colors" /> <input type="button" onclick="resetToFlopHor()" value="4. Horizontal Flip" /><hr /> Adjustment:<br /> <input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br /> <input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br /> Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" /> <input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br /> Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" /> <input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br /> Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" /> <input type="button" onclick="changeColorValue('eb', -10)" value="Less" /> Blur: <input type="button" onclick="changeBlurValue(1)" value="More" /> <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br /> </div> <div class="column2"> <canvas id="orig" width="500" height="333"></canvas> <canvas id="panel" width="500" height="333"></canvas> </div> <div style="clear:both;"></div> </div> <footer> <h2>HTML5 Image Effects App - Adding Horizontal Flip</h2> <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> </footer> </body> </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
/* general styles */ *{ margin:0; padding:0; } body { background-color:#bababa; background-image: -webkit-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%); background-image: -moz-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%); background-image: -o-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%); background-image: radial-gradient(600px 200px, circle, #ffffff, #bababa 50%); color:#fff; font:14px/1.3 Arial,sans-serif; } footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100; } footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } /* tutorial styles */ .container { color:#000; margin:20px auto; position:relative; width:730px; } .column1 { float:left; padding-right:10px; text-align:right; width:185px; } .column2 { float:left; width:500px; background-color:#888; padding:10px; } input[type=button] { margin:5px; }
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
function FlipHor() { func = 'flip_hor'; // last used function var imgd = context.getImageData(0, 0, iW, iH); var data = imgd.data; var imgd2 = context.getImageData(0, 0, iW, iH); var data2 = imgd2.data; for (var x = 0; x < iW/2; x++) { for (var y = 0; y < iH; y++) { var i = (y*iW + x); var i2 = (y*iW + ((iW-1)-x)); var iP1 = data2[i*4]*p1+er; var iP2 = data2[i*4+1]*p2+eg; var iP3 = data2[i*4+2]*p3+eb; data[i*4] = data[i2*4]*p1+er; // red data[i*4+1] = data[i2*4+1]*p2+eg; // green data[i*4+2] = data[i2*4+2]*p3+eb; // blue data[i2*4] = iP1; // red data[i2*4+1] = iP2; // green data[i2*4+2] = iP3; // blue } } context.putImageData(imgd, 0, 0); }
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!
Getting this error
Error: uncaught exception: [Exception… “An invalid or illegal string was specified” code: “12” nsresult: “0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)” location: “https://www.script-tutorials.com/demos/149/js/script.js Line: 64”]
Can not to reproduce (I have tried it in IE9). What is your browser buddy?
Works like a charm. Can you please provide the code to flip vertically?
Hi Anonymous,
You can use this method:
context.translate(0, canvas.height);
context.scale(1, -1);
context.drawImage(imgObj, 0, 0, iW, iH);
Hey nice job :)
if you want to upload image and edit how do you do it ?
Hi Nami, Is your question about how to upload image files? If so, we already made a plenty of tutorials with image upload functionality