5 Replies - 939 Views - Last Post: 16 May 2014 - 01:58 PM

#1 njeeva  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 15-May 14

Insert background image

Posted 15 May 2014 - 01:16 PM

How to insert background image, in that image how to insert text ?

In html file I want to insert a image in single page using CSS style sheet. As well as insert the text that particular image.
Is This A Good Question/Topic? 0
  • +

Replies To: Insert background image

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 14039
  • View blog
  • Posts: 56,179
  • Joined: 12-June 08

Re: Insert background image

Posted 15 May 2014 - 01:23 PM

You don't really insert text into an image in html. Sure you can use the CSS 'background image' property to set a div or form to a background image, but you would then use a div to have the text above the image.
Was This Post Helpful? 0
  • +
  • -

#3 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 139
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Insert background image

Posted 16 May 2014 - 01:31 PM

modi123_1 in post: #2 said:

You don't really insert text into an image in html. Sure you can use the CSS 'background image' property to set a div or form to a background image, but you would then use a div to have the text above the image.

Sorry that is not correct. Any image can be modified in HTML including the background image.


Below is a snippet that will do as you want njeeva

It uses the canvas to create the background image with text. I have just put the text in the center of the background image. You will have to set out the text how you want it and the font and style you want.

One caveat is that the call toDataURL() (that the code is dependent on) will not allow images from other domains or images from your file system to be used this way as it present a security risk. You can only use images from the pages domain. Apart from that there are no limits. todataURL is a little slower than directly loading the image but online nobody will notice.

There are two copies. One with comments and rantings the other straight code ready to run.

The narrated version....
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Background image with text</title>
</head>

<body>


<script>
 // Use a anonymous function so we leave a clean global scope
 // when done and assures GC will get when done.
 // at the bottom of the script is the call with the 
 // image URL and text.
 // You will have to set the text drawing to how and where you
 // want it.
(function(){function createBackgroundWithText(imageURL,text){
    // stor the text we want
    this.text = text;
    
    // create an image
    this.image = new Image();
    
    // the function that is called when the image
    // has loaded
    this.imageLoaded = function(){ // called when the 
                                   // image has loaded
        // create the  canvas
        var canvasEl = document.createElement('canvas');
        
        // set it to the image size
        canvasEl.width = this.image.width;
        canvasEl.height = this.image.height;
        
        // get the 2d drawing context/object of the canvas
        var ctx = canvasEl.getContext("2d");
        
        // draw the image on the canvas
        ctx.drawImage(this.image,0,0);
        
        // now set up the font 
        //100 is font weight 40 is font size and last is the font
		ctx.font = "100 40px Georgia";
        
        // set the font colour
		ctx.fillStyle = "White";
        
        // set the fonts to be drawn at its center
		ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        
        // draw the text at the centre of the canvas        
        ctx.fillText(this.text, this.image.width/2,this.image.height/2);        
        
        // done with drawing lets move it to the background.
        document.body.style.backgroundImage = "url('"+canvasEl.toDataURL()+"')";

        // all done happy hunting.
    }
    
    // this is called if the image can not be loaded.
    // there are a million and one reasons this could be
    // called so I am not going to try a recovery and
    // this just exits with a smile.
    this.imageError = function(){return "smile";}

    // lets load the image
    // Set the image URL and it starts to load.
    this.image.src = imageURL;
    
    // set the callbacks for the image
    // we bind this object (createBackgroundWithText)
    // as the image callback changes this to the image 
    // We have that so dont need it but need the text
    this.image.onload = this.imageLoaded.bind(this);
    
    // set up the error call if the image can not load
    // if you want a fall back you will have to bind this
    // to get a handle on this object.Like onload
    this.image.onerror = this.imageError;
    
    // now wait for the image to load...
}
// wai for the onload event by adding an event listener.
window.addEventListener("load",
        new createBackgroundWithText("GameEngine/png.png",
                    "Welcome to the world of javascript. :)/>/>"),
        false);    

// There is no such thing as can not. If there is a need there is 
// a way.                
 })();
</script>
</body>
</html>



And as a short condensed version
(function(){function createBackgroundWithText(imageURL,text){
    this.text = text;
    this.image = new Image();
    this.imageLoaded = function(){ // called when the 
        var canvasEl = document.createElement('canvas');
        canvasEl.width = this.image.width;
        canvasEl.height = this.image.height;
        var ctx = canvasEl.getContext("2d");
        ctx.drawImage(this.image,0,0);
		ctx.font = "100 40px Georgia";
		ctx.fillStyle = "White";
		ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.fillText(this.text, this.image.width/2,this.image.height/2);        
        document.body.style.backgroundImage = "url('"+canvasEl.toDataURL()+"')";
    }
    this.imageError = function(){return "smile";}
    this.image.src = imageURL;
    this.image.onload = this.imageLoaded.bind(this);
    this.image.onerror = this.imageError;
}
window.addEventListener("load",
        new createBackgroundWithText("GameEngine/png.png",
                    "Welcome to the world of javascript. :)/>/>"),
        false);    
 })();



Hope that gets what you wanted. If you have questions please do ask.

This post has been edited by Blindman67: 16 May 2014 - 01:33 PM

Was This Post Helpful? 1
  • +
  • -

#4 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 14039
  • View blog
  • Posts: 56,179
  • Joined: 12-June 08

Re: Insert background image

Posted 16 May 2014 - 01:40 PM

Any particular trick to make this work?

window.addEventListener("load",
        new createBackgroundWithText("https://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg",
                    "Welcome to the world of javascript. :)/>/>/>"),
        false);    



I changed that to have it grab a picture from the web.. no dice.
Was This Post Helpful? 0
  • +
  • -

#5 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 139
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Insert background image

Posted 16 May 2014 - 01:51 PM

Will not cross domains or from the file system. Must be the same origin as the page. Try adding the image to localhost and opening it from there. If you can find an older version of Chrome (V30ish) and can be bothered installing. It ignores the tainted flag created by the crossing of domain on the canvas and happily executes toDataURL().
Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Insert background image

Posted 16 May 2014 - 01:58 PM

This does seem like a rather overcomplicated way to do what is essentially very simple in HTML/CSS. Of course, it won't actually embed the text into the image, so if that's a requirement then HTML/CSS alone aren't an option, but if overlaying the text on top of the image is all you need, you should definitely just use HTML and CSS.

With that said, it is a nice Javascript solution to this, so kudos for that :)


Also, on a side-note, you're using this to generate meme-like images, you'd probably be better of with a server-side solution. Would get rid of the cross-domain issue, and let you cache the results on the server for reuse.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1