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 Monday, 9 September, 2019 07:55:34 PM

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 Monday, 9 September, 2019 08:00:44 PM

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 Monday, 9 September, 2019 09:12:02 PM

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 Monday, 9 September, 2019 09:23:00 PM

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 Tuesday, 10 September, 2019 01:32:18 AM

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 Tuesday, 10 September, 2019 02:52:11 AM

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 Tuesday, 10 September, 2019 05:35:56 AM

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 Tuesday, 10 September, 2019 01:50:40 PM

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 Tuesday, 10 September, 2019 01:56:16 PM

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 Tuesday, 10 September, 2019 02:28:31 PM

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 Tuesday, 10 September, 2019 06:46:52 PM

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 Tuesday, 10 September, 2019 06:55:18 PM

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 Tuesday, 10 September, 2019 09:48:05 PM