Image resizing

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|

Image resizing

Antônio Gomes-2
Hi there,

(well, I'm not quite sure if this is the right mailing list, but
probably you can help me out anyway).

In my embedding-mozilla app, I'm resizing the images in a web page using
imgl* interfaces (at modules/libpr0n/src/imgContainer.cpp) instead of
setting the style attribute directly in the DOM tree (the former much
faster, btw). Following is a quoted code used for that:

      (...) // zooming according to the current "text scale"
      DOMWindow->GetTextZoom(&curr_zoom);

      (...) // getting a nodelist within all images

      (...) resizing each one

    for (bla ; bla ; bla) {

        nsCOMPtr<nsIDOMNode> node;
        nodeList->Item(i, getter_AddRefs(node));
        nsCOMPtr<nsIDOMHTMLImageElement> img;
        img = do_QueryInterface(node);

        nsCOMPtr<imgIContainer> imgContainer;
        nsCOMPtr<nsIImageLoadingContent> imageLoader =
do_QueryInterface(img);
        if (imageLoader) {
                 nsCOMPtr<imgIRequest> imgRequest;
                 nsresult rv =
imageLoader->GetRequest(nsIImageLoadingContent::CURRENT_REQUEST,
getter_AddRefs(imgRequest));

                 if (!imgRequest) {
                       printf ("Resizing fails :(. It can't get
imgRequest obj\n");
                      return ;
                 }
       
                 rv = imgRequest->GetImage(getter_AddRefs(imgContainer));

               if (imgContainer) {

                         imgContainer->GetHeight(&height);
                         imgContainer->GetWidth(&width);

                         width = (PRInt32) ( width * relative_scale);
                         height = (PRInt32) ( height * relative_scale);


                } else printf ("Resizing fails :(. It can't get
imgContainer obj\n");

      } else printf ("Resizing troubles. It won't work.\n !");


        // THIS COULD BE THE PROBLEM ... The image size is changed but
not its DOM value :s
        img->SetHeight(height);
        img->SetWidth(width);

   } // end loop


Ok, I do get them resized at the first time, but if I try resizing again
the same web page, when I try to get the new sizes of each images ( to
apply the resizing scale) I've noticed they have the same value as
before the first resize (just their visual have changed). It seems like
the setHeight and setWidth do not set the value properly). Am I missing
something ?

Antonio Gomes

_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Boris Zbarsky
Antônio Gomes wrote:
>                         imgContainer->GetHeight(&height);
>                         imgContainer->GetWidth(&width);

Might I ask why you're not just using naturalWidth and naturalHeight (on
nsIDOMNSHTMLImageElement)?

>        // THIS COULD BE THE PROBLEM ... The image size is changed but
> not its DOM value :s
>        img->SetHeight(height);
>        img->SetWidth(width);

What do you mean by "its DOM value :s"?

> Ok, I do get them resized at the first time, but if I try resizing again
> the same web page, when I try to get the new sizes of each images

 From the imgContainer?  The imgContainer gives you the size of the image
encoded in the original GIF/JPEG/whatever file.  It does not depend on the width
or height of the displayed image.  So what you're seeing is exactly what you
should be seeing.

I'm not sure what you're trying to do, so I'm not sure what to tell you past
this point.

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Antônio Gomes-2
ext Boris Zbarsky wrote:

> Antônio Gomes wrote:
>
>>                         imgContainer->GetHeight(&height);
>>                         imgContainer->GetWidth(&width);
>
>
> Might I ask why you're not just using naturalWidth and naturalHeight
> (on nsIDOMNSHTMLImageElement)?

Two reasons:

1) Such access to the DOM style is much slower (4 times at least) than
using the imgContainer (measuring the time manually).
2) I thought I could use both "get and set size" methods through
imgContainer, but it seems to let me just get , right ?


like                  imgContainer->SetHeight(height);
                        imgContainer->SetWidth(width);

>
>>        // THIS COULD BE THE PROBLEM ... The image size is changed but
>> not its DOM value :s
>>        img->SetHeight(height);
>>        img->SetWidth(width);
>
>
> What do you mean by "its DOM value :s"?

I meant length (height || width)

>
>> Ok, I do get them resized at the first time, but if I try resizing
>> again the same web page, when I try to get the new sizes of each images
>
>
> From the imgContainer?  The imgContainer gives you the size of the
> image encoded in the original GIF/JPEG/whatever file.  It does not
> depend on the width or height of the displayed image.  So what you're
> seeing is exactly what you should be seeing.
>
So, no matter changes on the height or width of a image in the DOM Tree,
imgContainer will always get me original dimensions of an image. Is it
what you mean ?

> I'm not sure what you're trying to do, so I'm not sure what to tell
> you past this point.

I'm just trying to found out the  fastest way to zooming images (target
is an embedded device, so I must to be careful)

--Antonio

_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Christian Biesinger
In reply to this post by Boris Zbarsky
Antônio Gomes wrote:
> like                  imgContainer->SetHeight(height);
>                        imgContainer->SetWidth(width);

That's right. imgContainer is just a simple container for image data.
You can't change anything.

>> What do you mean by "its DOM value :s"?
>
> I meant length (height || width)

Can you answer it in terms of which property you access to check that?

> So, no matter changes on the height or width of a image in the DOM Tree,
> imgContainer will always get me original dimensions of an image. Is it
> what you mean ?

Yes.
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Antônio Gomes-2
ext Christian Biesinger wrote:

> Antônio Gomes wrote:
>
>> like                  imgContainer->SetHeight(height);
>>                        imgContainer->SetWidth(width);
>
>
> That's right. imgContainer is just a simple container for image data.
> You can't change anything.
>
>>> What do you mean by "its DOM value :s"?
>>
>>
>> I meant length (height || width)
>
>
> Can you answer it in terms of which property you access to check that?

I am accessing "style" property to check both "width and height" as
following:

    const PRUnichar styleLiteral[] = { 's', 't', 'y', 'l', 'e', '\0'};

    nsCOMPtr<nsIDOMElement> elm;
    elm = do_QueryInterface(node);

    nsEmbedString style_value;
    gchar *v g_strdup_printf("width: %dpx; height: %dpx;", width, height);
    nsEmbedCString cValue(v);
    NS_CStringToUTF16(cValue, NS_CSTRING_ENCODING_UTF8, style_value);
    elm->SetAttribute(nsEmbedString(styleLiteral), style_value);
    g_free(v);

>
>> So, no matter changes on the height or width of a image in the DOM
>> Tree, imgContainer will always get me original dimensions of an
>> image. Is it what you mean ?
>
>
> Yes.

Is there another way ?

--Antonio Gomes
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Boris Zbarsky
In reply to this post by Boris Zbarsky
Antônio Gomes wrote:
>> Might I ask why you're not just using naturalWidth and naturalHeight
>> (on nsIDOMNSHTMLImageElement)?
>
> Two reasons:
>
> 1) Such access to the DOM style is much slower (4 times at least) than
> using the imgContainer (measuring the time manually).

I'm not talking about style.  I'm talking about naturalWidth and
naturalHeight.  They have nothing to do with style.

> 2) I thought I could use both "get and set size" methods through
> imgContainer, but it seems to let me just get , right ?

imgContainer is just a class representing a bitmap.  It doesn't let you
edit the bitmap.  So its width and height are readonly in the IDL.

>> What do you mean by "its DOM value :s"?
>
> I meant length (height || width)

That doesn't really answer my question.  I can think of at least 5
different things you could mean here (computed style, specified style,
HTML attribute, DOM property, boxObject properties).  Which one are you
talking about?

> So, no matter changes on the height or width of a image in the DOM Tree,
> imgContainer will always get me original dimensions of an image. Is it
> what you mean ?

That's correct.  Since you were using imgContainer, I assumed that was
what you wanted.  If you want the current dimensions, just use .width
and .height on the image (see nsIDOMHTMLImageElement).

> I'm just trying to found out the  fastest way to zooming images (target
> is an embedded device, so I must to be careful)

I realize you're zooming images.  What I don't understand is whether
you're zooming from the intrinsic size or the current size.  Your code
looks like the code for zooming from intrinsic size, but then you're
complaining that it's zooming from intrinsic size...

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Boris Zbarsky
In reply to this post by Christian Biesinger
Antônio Gomes wrote:
> I am accessing "style" property to check both "width and height" as
> following:

[code to _set_ the style attribute follows]

That doesn't look like code to "check" anything....

> Is there another way ?

To do what?  Once you explain what you're doing, we can tell you how you
can do it.

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Antônio Gomes-2
In reply to this post by Boris Zbarsky
ext Boris Zbarsky wrote:

> Antônio Gomes wrote:
>
>>> Might I ask why you're not just using naturalWidth and naturalHeight
>>> (on nsIDOMNSHTMLImageElement)?
>>
>>
>> Two reasons:
>>
>> 1) Such access to the DOM style is much slower (4 times at least)
>> than using the imgContainer (measuring the time manually).
>
> I'm not talking about style.  I'm talking about naturalWidth and
> naturalHeight.  They have nothing to do with style.

Ok, I see. Are width and height from naturalWidth and naturalHeight also
intrinsic as the ones from imgContainer ? Should I use these methods
instead ?

I've seen these methods already, and this is exactly the point I want to
get across: I understand the DOM Tree manipulation as the best way to
change the content of any thing in a web page. But sometimes, accessing
(hitting) the DOM Tree many times could make my app slower. That's why I
searched for an alternative way for changing image size and I ended up
at the imgl* interfaces.

>>> What do you mean by "its DOM value :s"?
>>
>> I meant length (height || width)
>
> That doesn't really answer my question.  I can think of at least 5
> different things you could mean here (computed style, specified style,
> HTML attribute, DOM property, boxObject properties).  Which one are
> you talking about?

In this case, I meant html attribute (I guess :))

> I realize you're zooming images.  What I don't understand is whether
> you're zooming from the intrinsic size or the current size.  

Ok, I'm intending to zoom from the current size.

> Your code looks like the code for zooming from intrinsic size, but
> then you're complaining that it's zooming from intrinsic size...

That's because I haven't seen that imgl* work with intrinsic size.

>> Is there another way ?
>
> To do what?  Once you explain what you're doing, we can tell you how
> you can do it.

Ok, I'm trying to find out the "best/fast" way to zooming images. So
far, I've taken two paths:

1) getting the current size, applying the zooming scale, via
nsIDOM(NS)HTMLImageElement methods (set/get height/width).

   it works, but slowly.

2) getting the "intrinsic" image size from imgContainer, applying the
zooming scale, and then setting via nsIDOMHTMLImageElement methods (set
height/width).

  as you could see, I didn't know it would get me the immutable image size.


What do you suggest ?

--Antonio Gomes

_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Boris Zbarsky
In reply to this post by Boris Zbarsky
Antônio Gomes wrote:
> Ok, I see. Are width and height from naturalWidth and naturalHeight also
> intrinsic as the ones from imgContainer ? Should I use these methods
> instead ?

Yes, those are intrinsic.  And yes, if you want intrinsic size you should use those.

> I've seen these methods already, and this is exactly the point I want to
> get across: I understand the DOM Tree manipulation as the best way to
> change the content of any thing in a web page. But sometimes, accessing
> (hitting) the DOM Tree many times could make my app slower.

That shouldn't be happening.  If it is, please file bugs.  CC me on them.

>> That doesn't really answer my question.  I can think of at least 5
>> different things you could mean here (computed style, specified style,
>> HTML attribute, DOM property, boxObject properties).  Which one are
>> you talking about?
>
> In this case, I meant html attribute (I guess :))

The HTML attribute is what you'd get with setAttribute() and getAttribute()...
That is, the string actually attached to the <img> tag.

> Ok, I'm intending to zoom from the current size.

.width and .height on nsIDOMHTMLImageElement will give you the current size.

> Ok, I'm trying to find out the "best/fast" way to zooming images. So
> far, I've taken two paths:
>
> 1) getting the current size, applying the zooming scale, via
> nsIDOM(NS)HTMLImageElement methods (set/get height/width).
>
>   it works, but slowly.

Ok... what does "slowly" mean?  Compared to what?

Also, what Gecko version is this, just so we're on the same page?

> 2) getting the "intrinsic" image size from imgContainer, applying the
> zooming scale, and then setting via nsIDOMHTMLImageElement methods (set
> height/width).
>
>  as you could see, I didn't know it would get me the immutable image size.

Is this actually faster than the other approach??

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Antônio Gomes-2
ext Boris Zbarsky wrote:

> Antônio Gomes wrote:
>
>> I've seen these methods already, and this is exactly the point I want
>> to get across: I understand the DOM Tree manipulation as the best way
>> to change the content of any thing in a web page. But sometimes,
>> accessing (hitting) the DOM Tree many times could make my app slower.
>
>
> That shouldn't be happening.  If it is, please file bugs.  CC me on them.

Let me explain better: if I zoom-in (just text and images) a "large" web
page (by large I mean something like gmail showing 100/200 emails per
page) my zooming algorithm is doing the following:

* change some HTMLDOMImageElement attributes (height and width) - as you
pointed out - and setting the text size according to my scale (from the
nsIDOMWindow->SetTextSize).
* After 1#, the content of my page should be "redrawn" (layout layer I
presume) according to the new scale. However, often it does not happen
as it should: bad-formed | partially rendered content.

So as soon as I do something that requires a kind of repaint/rerendering
of showed content (like switching (topping) with another app and back to
the browser, for example), its content got updated (rendered properly -
new zooming scale and so on). The same occurs if I scroll up|down such
web pages. Is there something I can do to improve it ?

Of course, I'm running my application over a MiniMo build in a
linux-based-64M-of-RAM device, but even though it should be happening,
as you said.

--Antonio
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Antônio Gomes-2
In reply to this post by Boris Zbarsky
ext Boris Zbarsky wrote:

>> Ok, I'm trying to find out the "best/fast" way to zooming images. So
>> far, I've taken two paths:
>>
>> 1) getting the current size, applying the zooming scale, via
>> nsIDOM(NS)HTMLImageElement methods (set/get height/width).
>>
>>   it works, but slowly.
>
>
> Ok... what does "slowly" mean?  Compared to what?

In this case, comparing to opera :). I mean, around 10 seconds slower
using the 1st approach and 1 or 2 seconds slower using the 2nd one
(bellow) - I am zooming gmail (100 emails per page).

>
> Also, what Gecko version is this, just so we're on the same page?

Hummm, it is dated from nov/05. Pretty old indeed. I am about to update
asap to 1.8 branch.

>
>> 2) getting the "intrinsic" image size from imgContainer, applying the
>> zooming scale, and then setting via nsIDOMHTMLImageElement methods
>> (set height/width).
>>
>>  as you could see, I didn't know it would get me the immutable image
>> size.
>
> Is this actually faster than the other approach??

Yep, it's like 65% faster than the former one. I got the intrinsic size
once, caching them (instead of getting it from the DOM GetHeight|Width)
and set them when it's needed. Is there any drawback from this, like
mis-synchronization between my cache and the DOM if this got changed
somehow| (or by something) beyond my zooming ?

--Antonio
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Boris Zbarsky
In reply to this post by Boris Zbarsky
Antônio Gomes wrote:
> * After 1#, the content of my page should be "redrawn" (layout layer I
> presume) according to the new scale. However, often it does not happen
> as it should: bad-formed | partially rendered content.

"Odd".  I can't think of a good reason this would happen...

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Boris Zbarsky
In reply to this post by Boris Zbarsky
Antônio Gomes wrote:
> In this case, comparing to opera :). I mean, around 10 seconds slower
> using the 1st approach and 1 or 2 seconds slower using the 2nd one
> (bellow) - I am zooming gmail (100 emails per page).

Huh.  Do you see the same performance difference if you use intrinsicWidth (and
cache it) vs using width all the time?

>> Also, what Gecko version is this, just so we're on the same page?
>
> Hummm, it is dated from nov/05. Pretty old indeed. I am about to update
> asap to 1.8 branch.

Ah.  Anything 1.8-ish should be ok as far as I'm concerned.

>> Is this actually faster than the other approach??
>
> Yep, it's like 65% faster than the former one. I got the intrinsic size
> once, caching them (instead of getting it from the DOM GetHeight|Width)
> and set them when it's needed.

Yeah, that would be faster than refetching the current size all the time --
you're just doing less work.

> Is there any drawback from this, like
> mis-synchronization between my cache and the DOM if this got changed
> somehow| (or by something) beyond my zooming ?

Intrinsic size of images is immutable.

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Image resizing

Antônio Gomes-2
In reply to this post by Boris Zbarsky
After got images and text size set/scaled as desired (thanks for the
support I had on this thread) , if a 'reflow' occurs (e.g. pressing
'F5') just the text size is kept. How could I have the same behaviour
for images ?

--Antonio Gomes
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout