Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add text on image using JavaScript and Canvas

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.

like image 945
satya Avatar asked Dec 13 '16 08:12

satya


1 Answers

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" />
like image 175
Mihai Alexandru-Ionut Avatar answered Oct 13 '22 23:10

Mihai Alexandru-Ionut