1

htmlまたはjavascriptを使用して画像にテキストを書き込むことは可能ですか？

私はこれをしました

emタグを作成し、その中にスパンを作成しました。これで、スパンに任意のテキストを書き込んで、画像の上に表示されるようにemタグの位置を調整できます。emタグのz-indexをimageよりも大きい値に設定します。次に、テキストが画像の上に書かれているように見えます。

しかし、訪問者がテキストを編集できるオプションを提供したいと思います。どうすればいいですか？

コードサンプル：-

$("#em1").html("<p><span>Hi I am</span><br>
<span> Trying to </span><br><br>
<span> To write text</span></p>");


#em1{
    display: block;
    /*border: 1px solid black;*/
    position: absolute;
    top: 160px;
    right: 145px;
    z-index : 10;
}

背景（空白-何も書かれていない）画像を使用しています

4

3 に答える 3

4

contenteditable要素に属性を設定しますem。人々は通常それを期待しておらず、視覚的な外観にはそれを示唆するものが何もないので、おそらくユーザーに食用について知らせる必要があります。

于 2012-04-26T12:33:06.180 に答える
1

あなたはテキストエリアを持つことができます

<textarea  class='abc' >Hello Boys</textarea>

いくつかのcssが適用されています。

.abc{



background: url('http://www.bzfusion.net/skymaps/sky_englishspring.jpg') no-repeat; 
background-color:red; 
width:300px;

    height:500px;
}​

于 2012-04-26T12:50:49.663 に答える
0

この種の機能の良い習慣は、描画がサーバー側で行われることです。本当にクライアントで描画する必要がある場合は、HTML5キャンバスを使用してください。

その画像を保存する必要がある場合は、次の記事をお読みください： http ://www.nihilogic.dk/labs/canvas2image/

于 2012-04-26T12:32:27.283 に答える