Storing Image as Javascript Object Attribute

Question

I was wondering if it is possible to store an image as an attribute of a js object. For example, I currently have:

twitter = {h:35, w:35, x:0, y:0, src: "./twitter.png"};
tw = new Image;
tw.src = twitter.src;

and then later in the program

context.drawImage(tw, twitter.x, twitter.y, twitter.w, twitter.h);

but I was wondering if the image src can be combined into the twitter object, so that it can be called like so

context.drawImage(twitter.src, twitter.x, twitter.y, twitter.w, twitter.h);

Thanks,

Tom

How about creating a function that creates/assembles an <img /> tag with src as twitter.src and just put in the other attributes in style="" ? — daniel
– daniel, Commented Dec 5, 2012 at 21:27
context.drawImage(new Image().src=twitter.src, twitter.x, twitter.y, twitter.w, twitter.h); is worth a shot — mplungjan
– mplungjan, Commented Dec 5, 2012 at 21:28

bfavaretto · Accepted Answer · 2012-12-05 21:56:10Z

2

Yes, new Image returns an object, and you can have any object as a property value. So try this:

twitter = {h:35, w:35, x:0, y:0, src: "./twitter.png"};
tw = new Image;
tw.src = twitter.src;
twitter.src = tw;
context.drawImage(twitter.src, twitter.x, twitter.y, twitter.w, twitter.h);

answered Dec 5, 2012 at 21:56

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tommy Herren Over a year ago

But is it possible to eliminate lines 2-4 altogether? And instantiate the image inside the twitter declaration?

Stuart Over a year ago

You can instantiate the image as follows twitter = {h:35, w:35, x:0, y:0, src:"./twitter.png", image: new Image} but you will still need to set the image source at some point using twitter.image.src = twitter.src

Tommy Herren Over a year ago

that's perfect thanks! i have now trimmed it to tw = {w:35, h:35, x:0, y:0, src: "./twitter.png", img: new Image}; tw.img.src = tw.src;

trebuchet · Accepted Answer · 2012-12-05 21:26:10Z

0

You can use canvas's toDataURL() method to get the raw base64 bytes of the image and store that in the object

answered Dec 5, 2012 at 21:26

trebuchet

1,4719 silver badges14 bronze badges

Collectives™ on Stack Overflow

Storing Image as Javascript Object Attribute

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related