Creating HTML5 Image Effects App – Adding Horizontal Flip

Creating HTML5 Image Effects App – Adding Horizontal Flip

6 25960
HTML5 Image Effects App - Adding Horizontal Flip

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

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!

SIMILAR ARTICLES

Bootstrap Forms

0 5
jQuery Mobile Lesson 6

0 5

6 COMMENTS

  1. 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”]

    • Hi Anonymous,
      You can use this method:

      context.translate(0, canvas.height);
      context.scale(1, -1);
      context.drawImage(imgObj, 0, 0, iW, iH);

    • Hi Nami, Is your question about how to upload image files? If so, we already made a plenty of tutorials with image upload functionality

Leave a Reply