DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
11 Monitoring and Observability Tools for 2023
Learn more
  1. DZone
  2. Coding
  3. Languages
  4. HTML5 Image Effects – Emboss

HTML5 Image Effects – Emboss

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
Mar. 20, 12 · Interview
Like (0)
Save
Tweet
Share
11.64K Views

Join the DZone community and get the full member experience.

Join For Free
Today we continue our HTML5 canvas image filter examples. Today I would like to share with you a method of applying a Emboss effect to images. This is a pretty difficult method, but I am sure that you can repeat it. In our demo we can play with different images by adding an emboss effect to them, and we can ‘export’ our result on the image element (<img>).

Here are our demo and downloadable packages:

Live Demo

download in package


Ok, download the example files and let's start coding !


Step 1. HTML Markup

This is the markup of our demo page:

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Image Effects - Emboss | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="https://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1.7.1");
        </script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 Image Effects - Emboss</h2>
            <a href="http://www.script-tutorials.com/html5-image-effects-emboss/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div id="container" class="container">
            <table cellspacing=0>
                <tr>
                    <td><p>Canvas Object <CANVAS></p></td>
                    <td><p>Image Object <IMG></p></td>
                </tr>
                <tr>
                    <td><canvas id="source" width="500" height="500"></canvas><div id="next" class="button">Next image</div></td>
                    <td><img id="img" src="images/button.png" /></td>
                </tr>
                <tr>
                    <td><div id="emboss" class="button">Apply Emboss Effect</div></td>
                    <td><div id="toImage" class="button">To Image</div></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Basically – it contains just one canvas object, one image, and three ‘buttons’ (div elements).

Step 2. CSS

Here are our stylesheets (not so important, but anyway):

css/main.css

*{
    margin:0;
    padding:0;
}
body {
    background-image:url(../images/bg.png);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header 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;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    color: #000000;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 1005px;
}
table {
    background-color: rgba(255, 255, 255, 0.7);
}
table td {
    border: 1px inset #888888;
    position: relative;
    text-align: center;
}
table td p {
    display: block;
    padding: 10px 0;
}
.button {
    cursor: pointer;
    height: 20px;
    padding: 15px 0;
    position: relative;
    text-align: center;
    width: 500px;

   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none;
}

Step 3. JS

Finally – our JavaScript code for the Emboss effect:

js/script.js

// variables
var canvas, ctx;
var imgObj;

// filter strength
var strength = 0.5;

// shifting matrix
var matrix = [-2, -1, 0, -1, 1, 1, 0, 1, 2];

// normalize matrix
function normalizeMatrix(m) {
    var j = 0;
    for (var i = 0; i < m.length; i++) {
        j += m[i];
    }
    for (var i = 0; i < m.length; i++) {
        m[i] /= j;
    }
    return m;
}

// convert x-y coordinates into pixel position
function convertCoordinates(x, y, w) {
    return x + (y * w);
}

// find a specified distance between two colours
function findColorDiff(dif, dest, src) {
    return dif * dest + (1 - dif) * src;
}

// transform matrix
function transformMatrix(img, pixels) {

    // create a second canvas and context to keep temp results
    var canvas2 = document.createElement('canvas');
    var ctx2 = canvas2.getContext('2d');
    ctx2.width = canvas2.width = img.width;
    ctx2.height = canvas2.height = img.height;

    // draw image
    ctx2.drawImage(img, 0, 0, img.width , img.height);
    var buffImageData = ctx2.getImageData(0, 0, canvas.width, canvas.height);

    var data = pixels.data;
    var bufferedData = buffImageData.data;

    // normalize matrix
    matrix = normalizeMatrix(matrix);
    var mSize = Math.sqrt(matrix.length);

    for (var i = 1; i < img.width - 1; i++) {
        for (var j = 1; j < img.height - 1; j++) {

            var sumR = sumG = sumB = 0;

            // loop through the matrix
            for (var h = 0; h < mSize; h++) {
                for (var w = 0; w < mSize; w++) {
                    var r = convertCoordinates(i + h - 1, j + w - 1, img.width) << 2;

                    // RGB for current pixel
                    var currentPixel = {
                        r: bufferedData[r],
                        g: bufferedData[r + 1],
                        b: bufferedData[r + 2]
                    };

                    sumR += currentPixel.r * matrix[w + h * mSize];
                    sumG += currentPixel.g * matrix[w + h * mSize];
                    sumB += currentPixel.b * matrix[w + h * mSize];
                }
            }

            var rf = convertCoordinates(i, j, img.width) << 2;
            data[rf] = findColorDiff(strength, sumR, data[rf]);
            data[rf + 1] = findColorDiff(strength, sumG, data[rf + 1]);
            data[rf + 2] = findColorDiff(strength, sumB, data[rf + 2]);
        }
    }
    return pixels;
}

// process emboss function
function processEmboss() {

    // clear context
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw image
    ctx.drawImage(imgObj, 0, 0, imgObj.width , imgObj.height);

    // get image data
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // transform image data
    imageData = transformMatrix(imgObj, imageData);

    // draw data back
    ctx.putImageData(imageData, 0, 0);
};

$(function () {

    // create canvas and context objects
    canvas = document.getElementById('source');
    ctx = canvas.getContext('2d');

    // load source image
    imgObj = new Image();
    imgObj.onload = function () {

        // draw image
        ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
    }
    imgObj.src="images/pic1.jpg";

    // different onclick handlers
    var iCur = 1;
    $('#next').click(function () {
        iCur++;
        if (iCur > 6) iCur = 1;
        imgObj.src="images/pic" + iCur + '.jpg';
    });
    $('#emboss').click(function () {
        processEmboss();
    });
    $('#toImage').click(function () {
        $('#img').attr('src', canvas.toDataURL('image/jpeg'));
    });
});

This effect requires some pretty difficult matrix transformations, so you can try to understand it, or use it as-is. Of course, our script will pass through all the pixels of the original image, and then will apply some transformations.


Live Demo

download in package


Conclusion

I hope that our demo looks fine. Today we have added a new interesting effect to our html5 application – Emboss. I will be glad to see your thanks and comments. Good luck!

HTML

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How To Create a Failover Client Using the Hazelcast Viridian Serverless
  • Fixing Bottlenecks in Your Microservices App Flows
  • Practical Example of Using CSS Layer
  • Mission-Critical Cloud Modernization: Managing Coexistence With One-Way Data Sync

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: