Tools to Capture and Convert the Web
GrabzIt's Online Community

How does Scaling up images work?

Ask questions on how to capture or convert web pages or HTML into images, CSV, PDF or DOCX documents as well on how to convert videos into animated GIF's using our API.

In most cases, the screenshot I am trying to take is scaled down on the browser but I want to export it as larger. I am using the bheight and bwidth values to indicate what the height and width of the element is on the webpage and then passing the width and height value that I want (which will be the same aspect ratio). In some cases, the height is 2-4 times larger than the bheight and that starts to make the image very blurry.

All elements inside the div that I am trying to capture are not being enlarged larger than 100% of their size though. So for example, the bwidth of the div might be 300px and I want it to export as 900px wide. All images inside that div show up no larger than 300px but their true width is 1000px. Given that the image is 1000px wide, it should have no issue being 900px wide but it looks blurry like it was really a 300px wide image that is zoomed 3x. 

Additionally, the text in that image is blurry. 

A couple questions:

  - Am I doing something wrong?

  - How does Grabzit scale up? Is it taking a screenshot at 300px wide (in my example above) and then scaling it up after?  Or is it scaleing my elements from HTML first, then returning the screenshot?

  - Is the only way to achieve what I want to convert the HTML so all height and width values are increased by the scale I want?

 

I am using the ConvertHTML method with DataURI

 

Thanks.

Asked by GrabzIt Support on the 24th of September 2019

Information on using HD images can be found here.

You should be using the hd parameter and -1 width and hieght this will double the size of the image.

Using the width to set the exact size is not recommended. Additionally setting the height will mean that the image is zoomed and then scalled height wise which will blur the image.

HD images work by zooming the browser window and creating a screenshot.

Answered by GrabzIt Support on the 24th of September 2019

Thanks.  The problem is that HD only scales up 2X and sometimes I need more than that. Is there a way for me to do a setting like HD, where I set the scale?  If not, is there a different way to achieve what I am trying to do?

As of right now, it seems like the only way for me to achieve what I want is to capture the HTML, then use javascript to adjust all the inline styles of height and width and replace with height and width of the scale I want.

Thanks

Answered by Corey Alderin on the 24th of September 2019

Ok, you can set your own zoom using the width but you must set the height to -1 to avoid the image being resized length ways.

Answered by GrabzIt Support on the 24th of September 2019

But I want the height to be resized as well. So if I have an image that is 300x300 on the screen but I want it exported as 900x900, setting the height to -1 results in a 900x300 image. 

Answered by Corey Alderin on the 24th of September 2019

Yes, sorry you are correct regarding setting the height.

It looks like zooming via setting the width is currently broken. I have raised a case to fix this.

Answered by GrabzIt Support on the 24th of September 2019

OK, thanks for letting me know. Any idea how long these types of things take?  I know timelines are hard to give but any sense of timing would be helpful for me.  

Answered by Corey Alderin on the 24th of September 2019

Hopefully within the next day or so.

Answered by GrabzIt Support on the 24th of September 2019

That would be amazing, thanks. 

Answered by Corey Alderin on the 24th of September 2019

The issue is now fixed.

Answered by GrabzIt Support on the 24th of September 2019

Great, thanks for working on this so quickly. Is this something that I will see on my end right away or will it take some time?  The reason I ask is because I just tested it and it seems the same. 

Thanks again

Answered by Corey Alderin on the 24th of September 2019

I have just tried it and zoom works when the width is more than the browser width.

Answered by GrabzIt Support on the 24th of September 2019

Maybe I am misunderstanding what was fixed. I am testing the same div but with different browser sizes. The smaller the browser, the more blurry the final image is, even though it's the exact same.  

 

In other words, I have a final image that will be 1000px x 1000px. I have tested it when the div on the browser is 800x800, 600x600, 400x400, etc. and the smaller the bwidth/bheight (or the larger scale up to the final width/height), the more blurry the final image is. 

 

If my image looks great when the bwidth/bheight is 800x800, shouldn't it look the same when the image is 400x400? 

 

Thanks

Answered by Corey Alderin on the 24th of September 2019

HD is recommended because it just doubles the size of the image which produces the best results.

The fix means a zoom is now actually performed if the width is larger than the browser width.

If you are using the width and height you must double or triple etc the widths and heights in relation to the browser dimensions to create the best results. This is because unfortunately zoom works in levels and not percentages. So any percentage zoom calculated from the differences in widths must be converted to a level which likely not very accurate if it is not a simple factor of the size.

Answered by GrabzIt Support on the 24th of September 2019

HD is not something I can use (unless I am missing something) because in some cases I need an exact dimension, not 2X the size. And in some cases, I need more than 2X.

Let me see if I understand what you're saying. Let's say I have HTML that is 200x200 and I want the final size to 900x900. That is 4.5 x the size. Are you saying that it will only create this as 800x800 or 1000x1000 (4X or 5x the size) with the best results but the .5x difference is what creates the blurriness?

If I have this correct, the best solution then is to manipulate the HTML before sending it?  So basically, I should be creating HTML that is the correct size and then will not need any zoom?

 

Thanks

Answered by Corey Alderin on the 24th of September 2019

Yes pretty much, as the levels get larger as the zoom increases.

So zooms that are not x2, x3 or x4 will be inaccurate as the dimensions will be off.There are also only ten potential zoom levels so which I think equates to a maximum of X5.

Answered by GrabzIt Support on the 25th of September 2019