[HTML5] Using canvas element and javascript to modify image

Demo:

HTML5 Canvas is an HTML element that its contents can be rendered with Javascript. This time we will go through how to use HTML5 canvas to add text to the top layer of image. The first thing we have to prepare is a picture. Eventually I found this picture on web and it is quite suitable for this showcase. We can put a message at the paper.

OK, here is the code.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>

    function genImage() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        var bgsrc = document.createElement("img");
        bgsrc.src = "[image path]";
       
        bgsrc.onload = function(){
       
            context.drawImage(this, 0,0);
   
            context.fillStyle = '#000000';
            context.font = "bold 28px 'Lucida Grande',Helvetica,Arial,Verdana,sans-serif";
            context.fillText($("#message").val(), 160, 130);
           
            var imgsrc = canvas.toDataURL('image/jpeg');
            $("#img").attr("src",imgsrc);
        }

    }

    $(document).ready(function(){
        genImage();
    });
</script>
<canvas id='myCanvas' width='400' height='266' style="display:none;"></canvas>
<img id="img" src="https://lh4.googleusercontent.com/-6Y6TdPz2CdE/Tp-V1KgAJHI/AAAAAAAAEGA/eOvQOtgwFuY/s400/11%252520-%2525201.jpg">
<p>
<input type="text" value="Hello Hello!" maxlength="20" id="message"> <input type="button" value="Generate" onClick="genImage()">
</p>

In this example, JQuery has been chosen to simplify javascript calling. It can save lots of development time. Then, we should define the canvas area first.

<canvas id='myCanvas' width='400' height='266' style="display:none;"></canvas>

This is the code that define the canvas named myCanvas with dimension 400x266. It is the same with the picture size. The canvas is just a place for processing the image data. We will render the final image to a HTML image tag at the last step. We should give an ID to a image tag for the final image holder.

<img id="img" src="https://lh4.googleusercontent.com/-6Y6TdPz2CdE/Tp-V1KgAJHI/AAAAAAAAEGA/eOvQOtgwFuY/s400/11%252520-%2525201.jpg">

For the source image bgsrc, you can supply a relative path or base64 data of an image. But please note that URL is not a choice because it will cause security problem and you will got an javascript error.

OK, after the source image has been completely loaded, the first thing we have to draw the image again. Then, draw the text message and tune the position over the image.

            context.drawImage(this, 0,0);
   
            // write clock
            context.fillStyle = '#000000';
            context.font = "bold 28px 'Lucida Grande',Helvetica,Arial,Verdana,sans-serif";
            context.fillText($("#message").val(), 160, 130);

At the last, export the data at canvas to base64 image data, and assign it to the image tag #img. Here you go.

One more point you have to pay attention, word-wrap function is not support with in canvas area now. You have to develop your own word-wrap function for workaround.

Recently, iPhone 4S is the hottest topic around the world. I developed an application, which using canvas, to generate the conversation between Siri and me.

http://siri.we-love-programming.com

Check it out.

Book you may feel interested: