2

画像の上にテキスト/図形を配置するのに役立つ jquery または js ライブラリを探しています。このサイトhttp://picfont.com/のように 、ドラッグ アンド ドロップで画像上の任意の場所にテキストを配置できます。

前もって感謝します

4

2 に答える 2

4

答えは、画像全体 (テキストを含む) をファイルとして保存できるように、結果のテキストを画像内に埋め込む (つまり、ピクセルとして) かどうか、またはテキストが上に浮かんでもよいかどうかによって異なります。画像。

後者の場合、要素<div>の上に絶対に配置できる a を使用してください。<img>

前者の場合、私が知っている唯一のオプションは、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 = ...;

HTML5インターフェイスを使用してコントロールから画像が読み込まれる上記の変形については、http://jsfiddle.net/D8ZZS/2/も参照してください。<input type="file">FileReader

于 2012-08-30T07:56:26.087 に答える
0

前に言ったように、Googleは検索エンジンの使い方を知っている人にとって最高の友達です :)

このサイトには、画像にテキストを配置できる 30 個の jquery プラグインが表示されます。

または CSS を使用: http://css-tricks.com/text-blocks-over-image/

于 2012-08-30T07:54:49.767 に答える