/    Sign up×
Community /Pin to ProfileBookmark

Compositing 2 images into 1

We would like to use Javascript, CSS, Filters, and cookies to help create a page which can make a request for a jpg image then have this returned image visually pasted onto the display according to the x/y coordinates found in the returned cookie. The current display will already have an image and so we only care about overlaying the newly downloaded image on top of it. This will help give the illusion of an updating display. This is our mockup attempt at creating a Remote PC tool.

I was planning on makeing use of dynamic image loading thru the Image object to retrieve the new image. The current display makes use of a single <IMG> tag but i dont want to replace the image, only overlay. I can create a new <IMG> tag via javascript i suppose but I’m wondering if there is a way to just simply have the image pasted down with no extra memory or overhead taken up. Its likely i will be updating the display 100s of times and so if i had to create a new tag each time and each tag is being tracked in memory this could become resource intense. Is there a way to simply paste it visually and then to drop the resource but have it still displayed on screen? Sorta like merging layers in Photoshop which free up the the layer resources but create a united single image…

I was thinking down the lines of merging images. Imagine having a full 1024×768 image displayed (Full Image). Now behind the scenes I will have a temporary image object to load in a new image (Segment-Image). This new image is can be varing sizes (ie. 200×200) and needs to be positioned overtop of the larger image on a per pixel basis. At the moment i have the code downloading a new Full Image and just replacing the orginal Full Image’s .src. But this is taking too long to download and so want to try the segmented approach of smaller images which i use to overlay ontop of the full image. in the end the user gets the appearance of the entire image has been updated since only a small portion is all that ever changes.

So far what i’ve found promising have been Filters within IE6. See: [url]http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters.asp[/url] . Now the thing looks complicated but it does have a Compositor and i think i sw something about Dx and Dy for positioning an image.

We only need to support IE web browsers.

Thanks

to post a comment
CSS

0Be the first to comment 😎

×

Success!

Help @quantass spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...