如何使用 javaScript 在图片文件 (png) 中添加文本？

【问题标题】：How to add Text IN a picture file (png) with javaScript?如何使用 javaScript 在图片文件 (png) 中添加文本？
【发布时间】：2013-06-06 03:04:10
【问题描述】：

我发现我不能用 HTML 做到这一点（在图片中添加文本），我找到了一种使用 JAVA 的方法，但我很想通过使用 Javascript 找到一种方法。

【问题讨论】：

你只是想让它看起来像在图片中添加了文本，还是你真的需要改变 png 文件？
只是出于兴趣 - 为什么要这样做？您可以在图像上放置文字。如果这是用于水印或类似的东西，如果用户禁用了 JS，这将不起作用。
您需要永久修改PNG，还是只需要在网站上显示的图像上显示文本？是否需要使用 Javascript？你会对 CSS 满意吗？
我需要永久修改图片...使用javascript。
在其最终形式中，用户将能够在图片文件上选择一个区域，并在其中写入文本。

标签： javascript image

【解决方案1】：

你可以用画布来做，

<canvas id="canvas" width="340" height="340"></canvas>

脚本，

function addTextToImage(imagePath, text) {
    var circle_canvas = document.getElementById("canvas");
    var context = circle_canvas.getContext("2d");

    // Draw Image function
    var img = new Image();
    img.src = imagePath;
    img.onload = function () {
        context.drawImage(img, 0, 0);
        context.lineWidth = 1;
        context.fillStyle = "#CC00FF";
        context.lineStyle = "#ffff00";
        context.font = "18px sans-serif";
        context.fillText(text, 50, 50);
    };
}
addTextToImage("http://www.gravatar.com/avatar/0c7c99dec43bb0062494520e57f0b9ae?s=256&d=identicon&r=PG", "Your text");

http://jsfiddle.net/wAY6Y/

【讨论】：

这可能对我有帮助，我正在努力……谢谢很多 chamika
@user2456922:circle_canvas .toDataURL()会给你图片数据的url。