Problem with capture screenshot speed.

[trongdau184]

Hi,

This plugins capture the screenshot very well. But the speed is quite slow and make the browser is not responding for a while (about 4 - 5 seconds). For example, in my case, it takes about 9 seconds to capture a page just contains 6 tables, each table has about 20 rows.

Could you have any suggestions to improve the performance?

Btw, I see that in page http://html2canvas.hertzen.com/screenshots.html, it captures screenshot quite fast and smooth even if the page is complex such as yahoo, mashable.com,.... Is there any tip/trick? What's proxy use for?

Thanks a lot.

[niklasvh]

There are a number of things that affect the speed:

• Number of elements and text (either words or letters, depending on if you use letter-spacing)
• Do you use images which aren't from same origin?
• There are significant speed differences between browsers

Can you share the html you are trying to render, or give a link to a demo?

[trongdau184]

I didn't use images which aren't from same origin.

The plugins run best on Chrome, but it quite slow in IE and FireFox (display a popup notify about long running script)

Here is my HTML:

Quote list - XOSE\OB-1

```

Symbol	Name	Type				Last	Last Traded	+/-	+/-%	Bid	Ask	High	Low
AKSO	Aker Solutions				0	98.15	-	-	-	-	-	-	-
DNBNOR	DNB				0	56.35	02:14:33	0.1	0.18 %	-	-	-	-
DNO	DNO International				0	8.965	-	-	-	-	-	-	-
FOE	Fred. Olsen Energy				0	201.4	-	-	-	-	-	-	-
FRO	Frontline				0	30.95	-	-	-	-	-	-	-
GJF	GJENSIDIGE FORSIKRING				0	66.2	-	-	-	47	-	-	-
MHG	Marine Harvest				0	1.028	-	-	-	-	-	-	-
NHY	Norsk Hydro				0	27	-	-	-	-	-	-	-
ORK	Orkla				0	42	-	-	-	-	-	-	-
PGS	Petroleum Geo-Services				0	73.2	-	-	-	-	-	-	-
PRS	Prosafe				0	41.28	-	-	-	-	-	-	-
RCL	Royal Caribbean Cruises				0	190	-	-	-	-	-	-	-
REC	Renewable Energy Corporation				0	3	-	-	-	-	-	-	-
SDRL	Seadrill				0	151.9	-	-	-	-	-	-	-
SEVAN	Sevan Marine				0	1.5	-	-	-	-	-	-	-
SFR	STATOIL FUEL & RETAIL				0	51	-	-	-	-	-	-	-
STB	Storebrand				0	18.6	-	-	-	-	-	-	-
STL	Statoil				0	139.8	-	-	-	111	-	-	-
SUBC	Subsea 7				0	122	-	-	-	127.2	-	-	-
TEL	Telenor				0	92.6	-	-	-	-	-	-	-
TGS	TGS-NOPEC Geophysical Company				0	61	-	-	-	-	-	-	-
YAR	Yara International				0	157.1	-	-	-	-	-	-	-

```

Drop here

Order book - XOSE\3484

Volume	Buy			Sell	Volume
0		Ratio: -			0

Drop here

Intraday - XOSE\3484

Drop here

Historic - XOSE\3484

Drop here

Performance View - XOSE\3484

```

Period	High	Low	Close	+/-	+/-%
Today	276.05	269.83	273.85	2.18	0.80
1 week	308.60	256.02	289.56	-13.53	-4.67
1 month	308.60	256.02	296.97	-20.94	-7.05
3 months	326.66	249.87	319.96	-43.93	-13.73
6 months	326.66	244.20	272.84	3.19	1.17
1 year	326.66	244.20	318.60	-42.57	-13.36
Start of week	308.60	256.02	291.29	-15.26	-5.24
Start of month	308.60	256.02	290.65	-14.62	-5.03
Start of year	326.66	244.20	282.61	-6.58	-2.33

```

Drop here

News List - XOSE\3484

DN E24 IMK NA24 DN, E24, IMK, NA24 ```

				Date	Time	Source	Title
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb93891/l/0L0Sdn0Bno0Cforsiden0CpolitikkSamfunn0Carticle240A54220Bece/story01.htm	5/26/2012	7:29 AM	DN	SV vil ha heldagsskole
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb93891/l/0L0Sdn0Bno0Cforsiden0CpolitikkSamfunn0Carticle240A54220Bece/story01.htm	5/26/2012	7:29 AM	DN	SV vil ha heldagsskole
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb93890/l/0L0Sdn0Bno0Cforsiden0CpolitikkSamfunn0Carticle240A54210Bece/story01.htm	5/26/2012	7:30 AM	DN	Spår rødgrønn baksmell
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb93890/l/0L0Sdn0Bno0Cforsiden0CpolitikkSamfunn0Carticle240A54210Bece/story01.htm	5/26/2012	7:30 AM	DN	Spår rødgrønn baksmell
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9388f/l/0L0Sdn0Bno0Cforsiden0Ckommentarer0Carticle240A530A10Bece/story01.htm	5/26/2012	7:34 AM	DN	Streik på første klasse
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9388e/l/0L0Sdn0Bno0Cforsiden0Ckommentarer0Carticle240A53570Bece/story01.htm	5/26/2012	7:36 AM	DN	Rushtidsavgift lurt, statlig tvang dumt
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9388e/l/0L0Sdn0Bno0Cforsiden0Ckommentarer0Carticle240A53570Bece/story01.htm	5/26/2012	7:36 AM	DN	Rushtidsavgift lurt, statlig tvang dumt
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9388f/l/0L0Sdn0Bno0Cforsiden0Ckommentarer0Carticle240A530A10Bece/story01.htm	5/26/2012	7:55 AM	DN	Streik på første klasse
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9388f/l/0L0Sdn0Bno0Cforsiden0Ckommentarer0Carticle240A530A10Bece/story01.htm	5/26/2012	7:55 AM	DN	Streik på første klasse
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb94769/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54380Bece/story01.htm	5/26/2012	8:46 AM	DN	Kina jakter på milliardærer
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb94769/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54380Bece/story01.htm	5/26/2012	8:46 AM	DN	Kina jakter på milliardærer
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb94769/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54380Bece/story01.htm	5/26/2012	8:46 AM	DN	Kina jakter på milliardærer
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9388c/l/0L0Sdn0Bno0Cforsiden0Ckommentarer0Carticle240A54330Bece/story01.htm	5/26/2012	8:50 AM	DN	Rushtidsavgift lurt, statlig tvang dumt
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb94768/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54370Bece/story01.htm	5/26/2012	8:50 AM	DN	- Skrekkelig ydmykende
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb94768/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54370Bece/story01.htm	5/26/2012	8:50 AM	DN	- Skrekkelig ydmykende
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb94768/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54370Bece/story01.htm	5/26/2012	8:50 AM	DN	- Skrekkelig ydmykende
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9e693/l/0L0Sdagensit0Bno0Carticle240A5450A0Bece/story01.htm	5/26/2012	10:24 AM	DN	Sikrer Facebook seg Opera?
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9e693/l/0L0Sdagensit0Bno0Carticle240A5450A0Bece/story01.htm	5/26/2012	10:24 AM	DN	Sikrer Facebook seg Opera?
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fb9e693/l/0L0Sdagensit0Bno0Carticle240A5450A0Bece/story01.htm	5/26/2012	10:24 AM	DN	Sikrer Facebook seg Opera?
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fba3df9/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54520Bece/story01.htm	5/26/2012	11:36 AM	DN	IMF-sjef: - Hellas bør ikke forvente sympati
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fba3df9/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54520Bece/story01.htm	5/26/2012	11:36 AM	DN	IMF-sjef: - Hellas bør ikke forvente sympati
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fba3df9/l/0L0Sdn0Bno0Cforsiden0Cutenriks0Carticle240A54520Bece/story01.htm	5/26/2012	11:36 AM	DN	IMF-sjef: - Hellas bør ikke forvente sympati
0	False	False	http://dn.no.feedsportal.com/c/33154/f/538608/s/1fba3df8/l/0L0Sdn0Bno0CdnBil0Carticle23929530Bece/story ``` niklasvh commented 12 years ago Is there any css along with these tables? How much slower/faster is it compared to for example mashable.com? What kind of options do you use to run the script? niklasvh commented 12 years ago I'd like to point out also that although there isn't all that much content, there are a lot of html elements, and each of them gets parsed, css calculated etc, even though they may not draw anything on the canvas. trongdau184 commented 12 years ago It's quite slow compare to mashable.com, it takes more 3 or 4 seconds more and make browser not responding at that time. Here is my code (I built a wrapper): (function ($) { $.fn.makeThumbnail = function (options) { //just capture screenshot when IE version >= 9 if ($.browser.msie && $.browser.version < 9) { return; } var self = this, options = options || {}, callback = options.callback, clientRect = self[0].getBoundingClientRect(); options.elements = this; options.width = this[0].scrollWidth; // To capture whole element in case it has horizontal scrollbar options.height = this[0].scrollHeight; options.onrendered = function (canvas) { if (callback) callback(canvas); }; require(['Html2Canvas', 'Canvg', 'RGBColor'], function () { html2canvas(self[0], options); }); }; })(jQuery); Your comment: "each of them gets parsed, css calculated etc, even though they may not draw anything on the canvas" Do you have any suggestion for this case? Thanks for your quickly reply :-) niklasvh commented 12 years ago Well the only way to reduce the number of elements parsed is to actually reduce the number of elements. The script can't know that they won't apply anything on the page before actually parsing them. Have you run any profilers on the script to see what is eating up the most resources? Would you mind setting up a demo on your server or on jsfiddle so I can run some tests as well? © Githubissues. Githubissues is a development platform for aggregating issues.

[niklasvh]

Is there any css along with these tables? How much slower/faster is it compared to for example mashable.com? What kind of options do you use to run the script?

[niklasvh]

I'd like to point out also that although there isn't all that much content, there are a lot of html elements, and each of them gets parsed, css calculated etc, even though they may not draw anything on the canvas.

[trongdau184]

It's quite slow compare to mashable.com, it takes more 3 or 4 seconds more and make browser not responding at that time.

Here is my code (I built a wrapper):

(function ($) { $.fn.makeThumbnail = function (options) { //just capture screenshot when IE version >= 9 if ($.browser.msie && $.browser.version < 9) { return; }

    var self = this,
        options = options || {},
        callback = options.callback,
        clientRect = self[0].getBoundingClientRect();

    options.elements = this;
    options.width = this[0].scrollWidth; // To capture whole element in case it has horizontal scrollbar
    options.height = this[0].scrollHeight;

    options.onrendered = function (canvas) {
        if (callback) callback(canvas);
    };

    require(['Html2Canvas', 'Canvg', 'RGBColor'], function () {
        html2canvas(self[0], options);
    });

};

})(jQuery);

Your comment: "each of them gets parsed, css calculated etc, even though they may not draw anything on the canvas"

Do you have any suggestion for this case?

Thanks for your quickly reply :-)

[niklasvh]

Well the only way to reduce the number of elements parsed is to actually reduce the number of elements. The script can't know that they won't apply anything on the page before actually parsing them.

Have you run any profilers on the script to see what is eating up the most resources? Would you mind setting up a demo on your server or on jsfiddle so I can run some tests as well?