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

How to add Text IN a picture file (png) with javaScript?

本文关键字：png 添加 文本 文件 javaScript 何用      更新时间：2023-09-26

我发现我不能用HTML这样做(在图片中添加文本)，我找到了一种使用JAVA的方法，但我对使用Javascript找到一种方法很感兴趣。

你可以使用canvas 

<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/

相关文章：