2

我正在寻找可以帮助您在图像上放置文本/形状的 jquery 或 js 库。就像在这个网站http://picfont.com/中一样， 它可以让您通过拖放将文本放在图像上的任何位置。

提前致谢

4

2 回答 2

4

答案取决于您是否希望生成的文本嵌入到图像中（即作为像素），以便您可以将整个图像（包括文本）保存为文件，或者您是否愿意让文本漂浮在上方图片。

在后一种情况下，只需使用<div>可以绝对定位在<img>元素顶部的 a 。

在前一种情况下，我知道的唯一选择是使用 HTML5<canvas>元素，然后使用.fillText()将文本写入画布：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;

img.onload = function() {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(this, 0, 0);
    ctx.font = "36pt Verdana";

    ctx.fillStyle = "black";
    ctx.fillText("Test Text", 42, 82);

    ctx.fillStyle = "white";
    ctx.fillText("Test Text", 40, 80);
};

img.src = ...;

另请参阅http://jsfiddle.net/D8ZZS/2/以了解上述变体，其中<input type="file">使用 HTML5FileReader界面从控件加载图像。

于 2012-08-30T07:56:26.087 回答
0

我之前说过，谷歌是任何知道使用搜索引擎的人最好的朋友 :)

在这个站点中，您将看到 30 个 jquery 插件，它们允许您在图像上放置文本。

或使用 CSS：http ://css-tricks.com/text-blocks-over-image/

于 2012-08-30T07:54:49.767 回答