javascript - 如何使用 jquery 将文本保存在图像上

Question

我是 JavaScript 新手。我有以下 javascript 和 html 代码。问题是，当我下载图像时，JavaScript 编写的文本不会显示在下载的图像上。或者换句话说，文本不会打印在图像上。我想实现这一目标。以下是代码

<script type="text/javascript">
  jQuery(function($){

    var textover_api;
	 
    $('#target').TextOver({}, function() {
      textover_api = this;
	 
    });

	

  });

</script>

<img src="demo.jpg" id="target" />

我想实现像http://addtext.com/这样的功能.

提前致谢。

Answer 1

您可以使用 Canvas 来利用 HTML5 并在此处返回 base64 数据示例:

来源:Javascript; Adding text on image using canvas and save to image

draw();

function draw() {

    var canvas = document.getElementById('idCanvas');
    var context = canvas.getContext('2d');

    var imageObj = new Image();


  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    context.font = "40px Calibri";
    context.fillStyle = "red";
    context.fillText("My TEXT!", 50, 300);

    var canvas = document.getElementById('idCanvas');
    var dataURL = canvas.toDataURL();

    alert(dataURL);
  }
imageObj.setAttribute('crossOrigin', 'anonymous');
imageObj.src = "http://lorempixel.com/400/200/";
};`

<canvas id="idCanvas" width="576" height="577"></canvas>

http://jsfiddle.net/hmr7c8po/