473,326 Members | 2,337 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 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 2612
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Roger Shrubber | last post by:
I have a page with images that the user can drag from one frame to another. I need them to see a "ghost image" of the image they are dragging, while the original stays put. I use the onmousemove...
15
by: Anand Ganesh | last post by:
HI All, I have an Image. I want to clip a portion of it and copy to another image. How to do this? I know the bounding rectangle to clip. Any suggestions please. Thanks for your time and...
0
by: Nick Jacobson | last post by:
Please help! The following code is used to draw a bitmap on a form with a color key (i.e. a color that's not drawn). For speed purposes, I'm trying to call the Win32 API function:...
2
by: Nick Jacobson | last post by:
The following code is used to draw a bitmap on a form with a color key (i.e. a color that's not drawn). For speed purposes, I'm trying to call the Win32 API function: TransparentBlt. But the...
0
by: Satish Appasani | last post by:
Hi: I have a ASP.NET form with Web layout which I've achieved using panels. In one of the tab I have a File control to upload Images. When I put a file in the file control and move to another...
4
by: Detlef Huettenbach | last post by:
I was trying to convert a Windows Forms prototype application to an ASP.NET solution that makes use of loading data streams into the Image Web/Windows control. For WinForms no problem. However in...
7
by: lgbjr | last post by:
Hello All, I¡¯m using a context menu associated with some pictureboxes to provide copy/paste functionality. Copying the image to the clipboard was easy. But pasting an image from the clipboard...
23
by: Peter | last post by:
I have a problem with a page show_image.asp that returns a jpg image under Windows XP Pro SP2. The page sets content type as: Response.ContentType = "image/jpg" While this works perfectly fine...
0
Robbie
by: Robbie | last post by:
Hi again. I am using MCI to show a video file playing in a picturebox called PicVideo. (This works fine.) SendString = "open " + Chr(34) + DialogStuff.FileName + Chr(34) + " type " + FileType +...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.