[英]How to add text on image using JavaScript and Canvas
我需要使用 JavaScript/jQuery 在现有图像上添加文本。 这是我的代码:
<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>
这里我有一个文本字段。当用户在该文本字段中写一些东西时,它会写在该图像上,并且在提交表单时应该获取编辑过的图像。
您所需要的只是使用canvas
。 请看我的例子。
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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.