Blitting an image, to another

Discussion in 'Javascript' started by Arnaud Diederen, Jan 2, 2008.

  1. 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 <img> has 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
     
    Arnaud Diederen, Jan 2, 2008
    #1
    1. Advertising

  2. 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 <img> has 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.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Jan 2, 2008
    #2
    1. Advertising

  3. Thomas 'PointedEars' Lahn <> writes:

    > 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 <img> has 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 <canvas> instead of an <img>; then load the <img> in the
    background, and blit the portion of the <img> in 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
     
    Arnaud Diederen, Jan 2, 2008
    #3
  4. Arnaud Diederen (aundro) wrote:
    > Thomas 'PointedEars' Lahn <> writes:
    >> 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 <img> has 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 <canvas> instead of an <img>; then load the <img> in the
    > background, and blit the portion of the <img> in 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.htm> for
    <http://rtc-ski.ch/magnifier.js> Go e.g. to
    <http://rtc-ski.ch/ski/modelle/28er/28er> and 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>
     
    Thomas 'PointedEars' Lahn, Jan 2, 2008
    #4
  5. Thomas 'PointedEars' Lahn <> writes:

    > [deletia]
    >
    > I used modified magnifier code from
    > <http://www.namibia-cd.com/menu/js/magnifier.htm> for
    > <http://rtc-ski.ch/magnifier.js> Go e.g. to
    > <http://rtc-ski.ch/ski/modelle/28er/28er> and 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.
     
    Arnaud Diederen, Jan 2, 2008
    #5
  6. Arnaud Diederen (aundro) wrote:
    > Thomas 'PointedEars' Lahn <> writes:
    >> I used modified magnifier code from
    >> <http://www.namibia-cd.com/menu/js/magnifier.htm> for
    >> <http://rtc-ski.ch/magnifier.js> Go e.g. to
    >> <http://rtc-ski.ch/ski/modelle/28er/28er> and 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, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Jan 2, 2008
    #6
  7. Thomas 'PointedEars' Lahn <> writes:

    > > [...]
    > > 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.
     
    Arnaud Diederen, Jan 2, 2008
    #7
  8. Arnaud Diederen (aundro) wrote:
    > Thomas 'PointedEars' Lahn <> writes:
    >>> [...]
    >>> 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, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Jan 2, 2008
    #8
  9. Thomas 'PointedEars' Lahn <> writes:

    > > [...]
    > > 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.
     
    Arnaud Diederen, Jan 2, 2008
    #9
  10. Arnaud Diederen (aundro) wrote:
    > Thomas 'PointedEars' Lahn <> writes:
    >> 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>
     
    Thomas 'PointedEars' Lahn, Jan 2, 2008
    #10
  11. Thomas 'PointedEars' Lahn <> writes:

    > >
    > > [...] 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
     
    Arnaud Diederen, Jan 2, 2008
    #11
  12. (Arnaud Diederen (aundro)) writes:

    > Thomas 'PointedEars' Lahn <> writes:
    > >
    > > 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.
     
    Arnaud Diederen, Jan 3, 2008
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thomasa Gregg
    Replies:
    1
    Views:
    746
    clintonG
    Jun 28, 2004
  2. Varangian

    Check Image is over another Image

    Varangian, Mar 31, 2006, in forum: ASP .Net
    Replies:
    9
    Views:
    377
    Varangian
    Apr 5, 2006
  3. Andrew Crowe

    Fast 2D blitting and frame buffering

    Andrew Crowe, Dec 4, 2003, in forum: Java
    Replies:
    2
    Views:
    618
    Knute Johnson
    Dec 7, 2003
  4. jollyroger
    Replies:
    6
    Views:
    939
    dorayme
    Feb 8, 2007
  5. Andreas Romeyke

    Problem with Alphachannel with SDL::xxx blitting

    Andreas Romeyke, Feb 4, 2008, in forum: Perl Misc
    Replies:
    0
    Views:
    172
    Andreas Romeyke
    Feb 4, 2008
Loading...

Share This Page