Creating HTML5 Image Effects App – Adding Horizontal Flip

Creating HTML5 Image Effects App – Adding Horizontal Flip

6 66090
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

[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!

SIMILAR ARTICLES

Understanding Closures

0 24600

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