javascript - How to write text on image in html - Stack Overflow

admin管理员组

文章数量:1428990

Is it possible that we can write text on image using html or javascript.

I have done this

Created an em tag and create spans inside it and now we can write any text in spans and adjust the position of em tag such that it appears over image. Set the z-index of em tag to be larger value then image. Then it appears that text is written over image.

But I want to provide option using which a visitor can edit the text. How i can do it ?

Code Sample:-

$("#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;
}

I am using a background (blank-nothing written on it) image

Is it possible that we can write text on image using html or javascript.

I have done this

Created an em tag and create spans inside it and now we can write any text in spans and adjust the position of em tag such that it appears over image. Set the z-index of em tag to be larger value then image. Then it appears that text is written over image.

But I want to provide option using which a visitor can edit the text. How i can do it ?

Code Sample:-

$("#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;
}

I am using a background (blank-nothing written on it) image

• javascript
• html
• css

Share Improve this question Follow edited Apr 26, 2012 at 12:38 Sachin Jain asked Apr 26, 2012 at 12:28 Sachin JainSachin Jain 21.9k3434 gold badges110110 silver badges176176 bronze badges 6

• Add some code youve tried? that way we can help better – Brad Fox Commented Apr 26, 2012 at 12:30
• 1 Use the image as a background-image for a textarea. But do you mean in a way that the text actually bees part of the image?? – Mr Lister Commented Apr 26, 2012 at 12:31
• 2 You can to do it with contenteditable. – user1150525 Commented Apr 26, 2012 at 12:32
• Can you add image in background using CSS. – Riz Commented Apr 26, 2012 at 12:32
• @MrLister, @ dev did you actuelle read the question? He just needs something like contenteditable. – user1150525 Commented Apr 26, 2012 at 12:33

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

Set the contenteditable attribute on the em element. You probably need to inform users about the edibility, as people don’t normally expect it, and there is nothing in the visual appearance that suggests it.

You can have a textarea

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

with some css applied to it.

.abc{


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

    height:500px;
}​

A good practice for this kind of feature is that drawing is done on server side. If you really need to draw on client, use HTML5 canvas.

If you will need to save that image, read this article: http://www.nihilogic.dk/labs/canvas2image/

本文标签： javascriptHow to write text on image in htmlStack Overflow