Question

I am looking for jquery or js library that can help you place text/shapes over an image.
like in this site http://picfont.com/
it can let you put the text in any location over the image by drag and drop.

Thanks in advance

Answer 1

The answer depends on whether you want the resulting text to become embedded within the image (i.e. as pixels) such that you could save the whole image (text included) as a file, or whether you’re happy for the text to just float above the image.

In the latter case, just use a <div> that can be absolutely positioned on top of an <img> element.

In the former case the only option I know of is to use an HTML5 <canvas> element, and then use .fillText() to write text to the canvas:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;

img.onload = function() {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(this, 0, 0);
    ctx.font = "36pt Verdana";

    ctx.fillStyle = "black";
    ctx.fillText("Test Text", 42, 82);

    ctx.fillStyle = "white";
    ctx.fillText("Test Text", 40, 80);
};

img.src = ...;

See also http://jsfiddle.net/D8ZZS/2/ for a variant of the above where the image is loaded from a <input type="file"> control using the HTML5 FileReader interface.