如何使用Javascript和Canvas在图像上添加文本 [英] How to add text on image using Javascript and 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在图像上添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！