How to add text on image using JavaScript and Canvas

Question

I need to add text on existing image using JavaScript/jQuery. Here is my code:

<form name="billdata" id="billdata"  enctype="multipart/form-data" novalidate>
    <input name="text" id="txt" class="form-control" placeholder="Add Text"  type="text" required>
    <div class="col-md-6">
        <img src="703960808_1011008937_images.png">
    </div>
</form>

Here I have a text field.When user will write something in that text field it will written on that image and the edited image should fetched while form will submit.

If you want to overlay text then you can just edit the HTML using JS. If you actually want to edit the image and re-save it that's far more complex. In either case, please clarify what you are trying to do, and also show the code you've written yourself so far. As it stands your question is basically a 'write my code for me' request and is likely to be closed. — Rory McCrossan, Dec 13 '16 at 08:48
@RoryMcCrossan : Let me to explain again here suppose in textbox i wrote `1234` ,it should print on that image and the edited image should fetch for download or submit. — satya, Dec 13 '16 at 08:50

Mihai Alexandru-Ionut · Accepted Answer · 2016-12-13T09:50:56.760

20

All you need is to use canvas. Please take a look at my example.

var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');
canvas.width = $('img').width();
canvas.crossOrigin = "Anonymous";
canvas.height = $('img').height();
ctx.drawImage($('img').get(0), 0, 0);
ctx.font = "36pt Verdana";
$(document).on('input','#inp',function(){
    //redraw image
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage($('img').get(0), 0, 0);
    //refill text
    ctx.fillStyle = "red";
    ctx.fillText($(this).val(),40,80);
});
$('button').click(function(){
    console.log(ctx.getImageData(50, 50, 100, 100));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <img style="display:none" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTsEbEB4kEMHt3WJ13HpZE16hJ3iKrE8ugnErvyln7oNPDma48U" crossorigin="anonymous"/>
 <input type="text" id="inp"/>
  <button type="submit">Save</button>
</form>

<canvas id="canvas" />

edited Dec 13 '16 at 09:50

answered Dec 13 '16 at 09:02

Mihai Alexandru-Ionut

47,092
13
101
128

yes,its working but the text is overwriting. Suppose i remove one text from text-field and write again its overwritting. – satya Dec 13 '16 at 09:06
@ Alexandru-Ionut Mihai : yes,thank you. Can i get this edited image through canvas id for save ? – satya Dec 13 '16 at 09:18
@satya, please take a look here : http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server and here: http://stackoverflow.com/questions/1590965/uploading-canvas-image-data-to-the-server – Mihai Alexandru-Ionut Dec 13 '16 at 09:22
while trying to download its throwing this `ncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.` error. – satya Dec 13 '16 at 09:40
View updated answer.If you use `ctx.getImageData` you need to use `crossorigin="anonymous"` – Mihai Alexandru-Ionut Dec 13 '16 at 09:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130482/discussion-between-satya-and-alexandru-ionut-mihai). – satya Dec 13 '16 at 09:59
I can't. I'm on office. – Mihai Alexandru-Ionut Dec 13 '16 at 10:01

How to add text on image using JavaScript and Canvas

1 Answers1

Linked