我是 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/这样的功能.
提前致谢。
最佳答案
您可以使用 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>
关于javascript - 如何使用 jquery 将文本保存在图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33320768/