如何使用Javascript和Canvas在图像上添加文本

问题描述：

我需要使用javascript/jquery在现有图像上添加文本.我在下面解释我的代码.

I need to add text on existing image using javascript/jquery. I am explaining my code below.

<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.

答

您所需要做的就是使用canvas.请看我的例子.

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

如何使用Javascript和Canvas在图像上添加文本

相关推荐