471,066 Members | 993 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,066 software developers and data experts.

Blitting an image, to another


Hello everyone, and happy new year to all c.l.j'ers!

No bad code to post, just a question.

I wrote a JavaScript application that lets users view an image, and
zoom on it.

The way I "zoom" is pretty simple, really (I hope that your
newsreaders displays text with a monospace font..) :

Original image:
+-------------+ <=- <img>, absolutely positionned
|.....''''''''| inside a <div style="overflow:hidden;">
|.....' '<=- The user zooms that area
|.....''''''''|
+-------------+

Zoomed image (x2):
+-------------------------+ <=- <img>
|ooooooooooooooooooooooooo|
|ooooooooo+-------------+ <=- <div>
|ooooooooo|ooooooooooooo|o|
|ooooooooo|ooooooooooooo|o|
|ooooooooo|ooooooooooooo|o|
|ooooooooo+-------------+o|
|ooooooooooooooooooooooooo|
+-------------------------+
And now, with words: I re-scale the <img>, re-position it in the
<div>, and let the overflow:hidden clipping do the rest.

That works pretty fine, except that:

1) The interpolation is, of course, linear, giving some hard-to-read
pixel soup

2) If the user zooms a very small area, the <imghas to be re-scaled
by a possibly big factor. In both FF and IE, that can eat up a lot
of memory (too much, actually, crashing the browser). That's
... bad.
----

What I'd like to do:

Give the user a zoomed-in version of the image, without using a
re-scaling hack.

How would you do that? Does anyone know what would be the best method
to do it?

It must be working in IE and FireFox. I can use any technology that's
available with these browsers, as long as it's scriptable with
javascript.

Any idea can help!
Thanks, and best regards
Arnaud
Jan 2 '08 #1
10 2455
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
Arnaud Diederen (aundro) wrote:
Hello everyone, and happy new year to all c.l.j'ers!

Thanks, to you too.
[...]
And now, with words: I re-scale the <img>, re-position it in the
<div>, and let the overflow:hidden clipping do the rest.

That works pretty fine, except that:

1) The interpolation is, of course, linear, giving some hard-to-read
pixel soup

2) If the user zooms a very small area, the <imghas to be re-scaled
by a possibly big factor. In both FF and IE, that can eat up a lot
of memory (too much, actually, crashing the browser). That's
... bad.
----

What I'd like to do:

Give the user a zoomed-in version of the image, without using a
re-scaling hack.

How would you do that? Does anyone know what would be the best method
to do it?

Use two or more images. 2) will be difficult to do, if that.

Thanks for your reply, Thomas.

I've just thought of a solution that might work for FF:

Use a <canvasinstead of an <img>; then load the <imgin the
background, and blit the portion of the <imgin the <canvas>. That
should do: <URL:
http://developer.mozilla.org/en/docs/Canvas_tutorial:Using_images#Slicing>

Now, I need something pretty similar for IE.
Looking at the code of "excanvas" (<URL:
http://excanvas.sourceforge.net/>)
reveals that the 'drawImage()' operation is implemented, and so it
might work as well, but uses the 'img.src' attribute of the <img>. I
thought maybe there is another option, that'd smell a tad more like a
"native copy operation", if I may say so.. (i.e., something that
wouldn't rely on the cache)

Again, if anybody has _any_ idea at all, they're very, very welcome!

Best regards,
Arnaud
Jan 2 '08 #2
Arnaud Diederen (aundro) wrote:
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
>Arnaud Diederen (aundro) wrote:
>>[...]
And now, with words: I re-scale the <img>, re-position it in the
<div>, and let the overflow:hidden clipping do the rest.

That works pretty fine, except that:

1) The interpolation is, of course, linear, giving some hard-to-read
pixel soup

2) If the user zooms a very small area, the <imghas to be re-scaled
by a possibly big factor. In both FF and IE, that can eat up a lot
of memory (too much, actually, crashing the browser). That's
... bad.
----

What I'd like to do:

Give the user a zoomed-in version of the image, without using a
re-scaling hack.

How would you do that? Does anyone know what would be the best method
to do it?
Use two or more images. 2) will be difficult to do, if that.

Thanks for your reply, Thomas.

I've just thought of a solution that might work for FF:

Use a <canvasinstead of an <img>; then load the <imgin the
background, and blit the portion of the <imgin the <canvas>. That
should do: <URL:
http://developer.mozilla.org/en/docs/Canvas_tutorial:Using_images#Slicing>
You don't need the proprietary `canvas' element for that.
[...]
Again, if anybody has _any_ idea at all, they're very, very welcome!
I used modified magnifier code from
<http://www.namibia-cd.com/menu/js/magnifier.htmfor
<http://rtc-ski.ch/magnifier.js Go e.g. to
<http://rtc-ski.ch/ski/modelle/28er/28erand click the magnifier icon
below to see it working on the ski. Also note that it was a quick hack.

But I'm afraid that unless you use `canvas', the image you load in the
background will have to be very large (and therefore slow to load) if
you need a context-sensitive zoom factor.
PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Jan 2 '08 #3
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
[deletia]

I used modified magnifier code from
<http://www.namibia-cd.com/menu/js/magnifier.htmfor
<http://rtc-ski.ch/magnifier.js Go e.g. to
<http://rtc-ski.ch/ski/modelle/28er/28erand click the magnifier icon
below to see it working on the ski. Also note that it was a quick hack.

But I'm afraid that unless you use `canvas', the image you load in the
background will have to be very large (and therefore slow to load) if
you need a context-sensitive zoom factor.

Hi again Thomas,

that solution you're proposing has the same drawbacks as the one I was
using before: It requires a "big image".

Besides, in those examples, the "big image" has a fixed zoom factor,
against the "smaller image".
In my use-case, the user can zoom by box, and he's the one determining
the box extents, so I cannot possibly know how much the image will
have to be zoomed in.. (and the user might choose to zoom a very small
box on the original image, requiring it to be scaled by a huge factor
(x10000, for example)).

Thanks, though!

A.

Jan 2 '08 #4
Arnaud Diederen (aundro) wrote:
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
>I used modified magnifier code from
<http://www.namibia-cd.com/menu/js/magnifier.htmfor
<http://rtc-ski.ch/magnifier.js Go e.g. to
<http://rtc-ski.ch/ski/modelle/28er/28erand click the magnifier icon
below to see it working on the ski. Also note that it was a quick hack.

But I'm afraid that unless you use `canvas', the image you load in the
background will have to be very large (and therefore slow to load) if
you need a context-sensitive zoom factor.

[...]
that solution you're proposing has the same drawbacks as the one I was
using before: It requires a "big image".

Besides, in those examples, the "big image" has a fixed zoom factor,
against the "smaller image".
In my use-case, the user can zoom by box, and he's the one determining
the box extents, so I cannot possibly know how much the image will
have to be zoomed in.. (and the user might choose to zoom a very small
box on the original image, requiring it to be scaled by a huge factor
(x10000, for example)).
Hence my saying that either you will need a large big image that you can
scale with different zoom factors without artifacts or you will have to use
more than two images, depending on the user's choice. Consider the way
Google Maps does that.
Thanks, though!
You're welcome.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jan 2 '08 #5
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
[...]
that solution you're proposing has the same drawbacks as the one I was
using before: It requires a "big image".

Besides, in those examples, the "big image" has a fixed zoom factor,
against the "smaller image".
In my use-case, the user can zoom by box, and he's the one determining
the box extents, so I cannot possibly know how much the image will
have to be zoomed in.. (and the user might choose to zoom a very small
box on the original image, requiring it to be scaled by a huge factor
(x10000, for example)).

Hence my saying that either you will need a large big image that you can
scale with different zoom factors without artifacts or you will have to use
more than two images, depending on the user's choice. Consider the way
Google Maps does that.
Hi Thomas,

Google maps uses fixed-scales. I cannot afford that, unfortunately:
the user must be able to zoom to whatever box he/she chooses, so
that's not an option :|

Best regards,

A.
Jan 2 '08 #6
Arnaud Diederen (aundro) wrote:
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
>>[...]
that solution you're proposing has the same drawbacks as the one I was
using before: It requires a "big image".

Besides, in those examples, the "big image" has a fixed zoom factor,
against the "smaller image".
In my use-case, the user can zoom by box, and he's the one determining
the box extents, so I cannot possibly know how much the image will
have to be zoomed in.. (and the user might choose to zoom a very small
box on the original image, requiring it to be scaled by a huge factor
(x10000, for example)).
Hence my saying that either you will need a large big image that you can
scale with different zoom factors without artifacts or you will have to use
more than two images, depending on the user's choice. Consider the way
Google Maps does that.

[...]
Google maps uses fixed-scales. I cannot afford that, unfortunately:
the user must be able to zoom to whatever box he/she chooses, so
that's not an option :|
You misunderstood me. I was referring to the way Google Maps loads images.
Of course I know you can't provide an image for every zoom level, but you
can provide say 5 images with increasing resolution and use each one for a
viable range of zoom levels.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jan 2 '08 #7
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
[...]
Google maps uses fixed-scales. I cannot afford that, unfortunately:
the user must be able to zoom to whatever box he/she chooses, so
that's not an option :|

You misunderstood me. I was referring to the way Google Maps loads images.
Of course I know you can't provide an image for every zoom level, but you
can provide say 5 images with increasing resolution and use each one for a
viable range of zoom levels.
I misunderstood you indeed!

That would be quite a good solution but, basically, I cannot fetch
more than 1 image (I know it sounds weird but,
basically, retrieving one of these images from the server triggers
rather heavy computing, and I cannot afford that).

So, that's not an option, alas :(

Again, thanks for the idea!

Best,
A.

Jan 2 '08 #8
Arnaud Diederen (aundro) wrote:
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
>Of course I know you can't provide an image for every zoom level, but
you can provide say 5 images with increasing resolution and use each
one for a viable range of zoom levels.

[...] That would be quite a good solution but, basically, I cannot fetch
more than 1 image (I know it sounds weird but, basically, retrieving one
of these images from the server triggers rather heavy computing, and I
cannot afford that).

So, that's not an option, alas :(
Would it be possible to compute the high-res image only once and then
serve only the best scaled variant of it on the fly with e.g. the use
of ImageMagick or GD Lib? If not, SVG appears to be more fitting.
PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Jan 2 '08 #9
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:

[...] That would be quite a good solution but, basically, I cannot fetch
more than 1 image (I know it sounds weird but, basically, retrieving one
of these images from the server triggers rather heavy computing, and I
cannot afford that).

So, that's not an option, alas :(

Would it be possible to compute the high-res image only once and then
serve only the best scaled variant of it on the fly with e.g. the use
of ImageMagick or GD Lib? If not, SVG appears to be more fitting.

Unfortunately not, as the data that composes the image is variable,
and potentially changes quite often; that would require the re-scaling
process to be run over and over again, potentially wasting a lot of
CPU power on the server.

Best,
Arnaud

Jan 2 '08 #10
ad@remove.this.and.keep.what.follows.ionicsoft.com (Arnaud Diederen (aundro)) writes:
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:

Would it be possible to compute the high-res image only once and then
serve only the best scaled variant of it on the fly with e.g. the use
of ImageMagick or GD Lib? If not, SVG appears to be more fitting.


Unfortunately not, as the data that composes the image is variable,
and potentially changes quite often; that would require the re-scaling
process to be run over and over again, potentially wasting a lot of
CPU power on the server.

Best,
Arnaud

Thomas,

just to let you know: I managed to get the results I wanted, using the
"matrix" filter, which will accept to resize the image (even by very
high factors), and not eat up all the memory to do so.

<URL:
http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2619310&SiteID=1>

Thanks for your suggestions,

A.
Jan 3 '08 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

15 posts views Thread by Anand Ganesh | last post: by
reply views Thread by Nick Jacobson | last post: by
2 posts views Thread by Nick Jacobson | last post: by
reply views Thread by Satish Appasani | last post: by
4 posts views Thread by Detlef Huettenbach | last post: by
7 posts views Thread by lgbjr | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.