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

Using GrabzIt javascript on local

Is there a way for me to use GrabzIt javascript on my local and/or a page that is not public?

 

Thanks

Asked by Josh Wiley on the 9th of September 2019

Yes, just call it from localhost or even just a html file and it will work. Please tell me if you have any issues.

Answered by GrabzIt Support on the 9th of September 2019

OK, thanks.  I am starting to understand this a little more. I was reading this page: https://grabz.it/support/?uniqueId=html-tips.

A couple questions about this:

1) If I use ConvertHTML, does the CSS need to be inside Div I am trying to take a screenshot of? Or is it OK to have stylesheets outside that Div?

2) Some of the fonts I am trying to screenshot, do not show with the correct font. Are fonts treated differently?

Answered by Josh Wiley on the 9th of September 2019

ConvertHtml can convert a string of HTML you can include the CSS but if you don't you will need to ensure any external stylesheet is using absolute URLs.

Fonts should work if they are properly referenced using absolute URLs etc in the CSS.

Answered by GrabzIt Support on the 9th of September 2019

Thanks.  Another question. Is there a way to scale up the final image without having blank space on the right and bottom?  

For example, I am trying to screenshot a Div that is 500x300 but I want to scale it up to 750x450. When I set the width to 750 and the height to 450, it creates a 750x450 image but the div that I am taking a screenshot of only shows up as a 500x300 image and the rest of the space is blank.

 

Thanks

Answered by Josh Wiley on the 10th of September 2019

Also, I have been trying ConvertPage and it's not working either, but with different results. Below is an example of what I did. It cuts off the image though and only shows about half of it.

 

GrabzIt("APPLICATION KEY").ConvertPage({
"target": "#paddAroundExport",
"delay": 3000,
"format": "png",
"transparent": 1,
"bheight": -1,
"height": -1,
"width": -1
}).AddTo("finalImageID");

Answered by Josh Wiley on the 10th of September 2019

Hi Josh,

For your first question you could set the browser size to 500 by 300. Then set the larger width to scale it up.

There is more information in the linked article.

On your second point, would it be possible to look at the page you are having issues with?

Answered by Josh Wiley on the 10th of September 2019

OK, I see how scaling up works now for ConvertHTML. Thanks, that is very helpful. I was a little confused by what bheight and bwidth were. I am getting really close with using ConverHTML but a few things are still off. This option might be difficult for me because all the stylesheets need to be accessible, which is hard for me to do since I need to work on my local version to test it out.

 

The ConverPage option seems to be my best but I am a little further off from getting this one to work. Most of what I am doing is on my local or behind a login. Would screenshots help?  Maybe I could email you some screenshots?  If not, I can maybe use something like JSFiddel to try to recreate the issue.

Thanks

 

Answered by Josh Wiley on the 10th of September 2019

Can you not still reference the CSS with absolute urls? e.g. https://www.example.com/styles/main.css

A screenshot wouldn't help much unfortunatley as we wouldn't be able to work out why it is only capturing part of the div. If you can put it in a seperate HTML file or JSFiddle so we can see the problem. We hopefully will be able to fix or advise about it.

Answered by GrabzIt Support on the 10th of September 2019

Regarding CapturePage I have just releasized what the issue is. The CapturePage method needs to have access to any publicly available resources as described in this article.

Answered by GrabzIt Support on the 10th of September 2019

OK, I am stuck on what my best option is here. I think I still don't fully understand what I need to do. It looks like the only option I have for this to work on my local is to use ConvertHTML. Is that correct?

Not sure if you do this, but would it be possible for me to connect with you over Zoom briefly?  If I can get this to work as I need it, I will be upgrading to the Enterprise.  I am even willing to upgrade to Enterprise right away if you are willing to jump on Zoom ( I can set it up). I think this would save us both time so we can stop the back and forth. 

 

Answered by Josh Wiley on the 10th of September 2019

Ok, I haven't used that before but I will give it a go.

Please can you send the details through our contact form.

Answered by GrabzIt Support on the 10th of September 2019

Thanks for the help today. I was able to get it to work with your help and one additional detail. I added a div that wrapped around the content I sent through convertHTML and use the target option to get that specific div. That made it work perfectly. 

I realized what was happening when I created a test page with the exact contents I was sending through ConvertHTML. The captured image was capturing a body tag that appears to be added by the browser, even though I was not sending one.  Not sure if that is my fault or a bug in GrabzIt but wanted to mention it in case it's a bug.

Answered by Josh Wiley on the 10th of September 2019