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
– Rory McCrossan, Commented Dec 13, 2016 at 8: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
– satya, Commented Dec 13, 2016 at 8:50

Mihai Alexandru-Ionut · Accepted Answer · 2016-12-13 09:50:56Z

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" />

yes,its working but the text is overwriting. Suppose i remove one text from text-field and write again its overwritting.
@ Alexandru-Ionut Mihai : yes,thank you. Can i get this edited image through canvas id for save ?
@satya, please take a look here : stackoverflow.com/questions/13198131/… and here: stackoverflow.com/questions/1590965/…
while trying to download its throwing this ncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. error.
View updated answer.If you use ctx.getImageData you need to use crossorigin="anonymous"

Collectives™ on Stack Overflow

How to add text on image using JavaScript and Canvas

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related