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/

如何使用jquery

1 个答案: