4

I found out I cannot do that (adding text IN a picture) with HTML , I found a way with JAVA but I am intresting in finding a way by using Javascript.

Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
user2456922
  • 49
  • 1
  • 2
  • 2
    Do you just want it to look like text is added to the picture, or do you actually need the png file altered? – user2000008 Jun 05 '13 at 18:46
  • 2
    Just out of interest - why do you want to do that? You can put text over the image. If this is for watermarking or something like that, if a user disabled JS, this won't work. – MarioP Jun 05 '13 at 18:47
  • 1
    Do you need to permanently modify the PNG, or do you just need to display text over the image when shown on a website? Does it NEED to be with Javascript? Would you be happy with CSS? – JohnFilleau Jun 05 '13 at 18:47
  • Are you okay with using canvas? – pvnarula Jun 05 '13 at 18:56
  • [LINK](http://stackoverflow.com/questions/3351122/what-is-the-best-javascript-image-processing-library) Possible duplicate answer? What is this I don't even... – JohnFilleau Jun 05 '13 at 18:56
  • Another question: **Why you don't monitor the questions you ask!!!**. don't ask and go away, this is not how this site should be used. – gdoron Jun 05 '13 at 18:57
  • 3
    I need to actually modify the picture permanently ... By using javascript. – user2456922 Jun 05 '13 at 18:57
  • @user2456922 Is this something you want to dynamically happen whenever a user loads a webpage? – user2000008 Jun 05 '13 at 19:03
  • 1
    In its final form the User will be able to choose an area over a picture file , and write text IN it. – user2456922 Jun 05 '13 at 19:05

1 Answers1

11

You can do it using canvas,

<canvas id="canvas" width="340" height="340"></canvas>

Script,

function addTextToImage(imagePath, text) {
    var circle_canvas = document.getElementById("canvas");
    var context = circle_canvas.getContext("2d");

    // Draw Image function
    var img = new Image();
    img.src = imagePath;
    img.onload = function () {
        context.drawImage(img, 0, 0);
        context.lineWidth = 1;
        context.fillStyle = "#CC00FF";
        context.lineStyle = "#ffff00";
        context.font = "18px sans-serif";
        context.fillText(text, 50, 50);
    };
}
addTextToImage("http://www.gravatar.com/avatar/0c7c99dec43bb0062494520e57f0b9ae?s=256&d=identicon&r=PG", "Your text");

http://jsfiddle.net/wAY6Y/

Chamika Sandamal
  • 23,565
  • 5
  • 63
  • 86