Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Remote Application Platform (RAP) » RAP: screenshot html2canvas
RAP: screenshot html2canvas [message #896105] Tue, 17 July 2012 09:31
Andrea Poli is currently offline Andrea Poli
Messages: 28
Registered: December 2011
Location: Italy
Junior Member

Hi,
I'm developing a RAP application which allows to draw automata.
The application is a porting of a PDE plugin. GEF & Draw2D are used in order to draw automata.
I'm trying to create a screenshot of one automaton. It looks like that RAP has no support for screenshot so I decided to write a plugin which uses html2canvas in order to get the screenshot.
I tested html2canvas outside RAP and it works well. In RAP it looks like it doesn't work.
I created a plugin which uses a Browser widget to open, inside an iframe, the page from which the following js code is called: in brief it tries to get the automaton div from the iframe parent (which is where the automaton is drawn) and then it calls html2canvas to create, inside the iframe, a canvas with the screenshot.
It succeeds in getting automaton div and calling html2canvas but no canvas will be created. html2canvas gets the following errors:

html2canvas: Preload starts: finding background-images html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: failed to get background-image - Exception: computedCSS is null

html2canvas.js (riga 27)

html2canvas: Preload: Finding images

html2canvas.js (riga 27)

html2canvas: Preload: Done.

html2canvas.js (riga 27)

html2canvas: start: images: 1 / 5 (failed: 1)

html2canvas.js (riga 27)

html2canvas: start: images: 2 / 5 (failed: 2)

html2canvas.js (riga 27)

html2canvas: start: images: 3 / 5 (failed: 3)

html2canvas.js (riga 27)

html2canvas: start: images: 4 / 5 (failed: 4)

html2canvas.js (riga 27)

html2canvas: start: images: 5 / 5 (failed: 5)

html2canvas.js (riga 27)

Finished loading images: # 5 (failed: 5)

html2canvas.js (riga 27)

computedCSS is null
[Interrompi per questo errore] 	

val = computedCSS[ attribute ];


function sendScreenshot2Client()
{
	clearInterval(window.screenshotAlrm);

	var canvas = document.getElementsByTagName('canvas')[0];

	if (typeof canvas === "undefined") 
	{
		alert("sendScreenshot2Client: canvas is " + canvas);

		return;
	}

	try
	{
                //if a canvas exists then it is converted into a data URI. 
                //The data URI is sent to the user. 
		Canvas2Image.saveAsPNG(canvas);
	}catch(ec)
	{
		alert("sendScreenshot2Client: " + ec);
	}
}

function loadScript(document, window)
{
	var html2canvas = ['html2canvas','jquery.plugin.html2canvas', 'base64',  'canvas2image'], i;
	include_dom(document, './js/jquery-1.7.1.js');

    	for (i = 0; i < html2canvas.length; ++i) {
		include_dom(document, './js/' + html2canvas[i] + '.js');
    	}
}

(function(document, window) {
    window.loadJS = function (){
		try
		{
			loadScript(document, window);
        
			//var canvasexp = "/html/body/div[2]/div[6]/div/div[7]/div[6]/div[2]";

			//var canvasexp = "/html/body/div[2]/div[6]/div/div[2]/div/div/div[3]/div[3]";
	
			var canvasexp = "/html/body/div[2]/div[6]/div/div[2]/div/div/div[3]/div[3]/div";

			var h2cSelector = null;

			alert("xpath " +  canvasexp);

                        //select automaton div
			h2cSelector = [parent.document.evaluate(canvasexp, parent.document, null, XPathResult.ANY_TYPE, null).iterateNext()];

			if (typeof h2cSelector === "undefined") 
			{
				clearInterval(window.intervalID);

				alert("h2cSelector is undefined");

				return;
			}

	        	if (window.setUp) {
	        	    window.setUp();
	        	}	

                        //call html2canvas, a new CANVAS element should be created 
                        //inside the iframe
			$(h2cSelector).html2canvas({
                		flashcanvas: "./js/flashcanvas.min.js",
                		logging: true,
                		profile: true,
                		useCORS: true
            		});

		}catch(e)
		{
			alert("loadJS: " + e);
		}

		clearInterval(window.intervalID);
    };

    window.intervalID = setInterval(window.loadJS, 100);

    window.screenshotAlrm = setInterval(sendScreenshot2Client, 5000);
}(document,window));


If there is a better tool which allows to create a screenshot inside RAP then I will use it without any problem. At the moment this is the only "solution" which I have found.

I will appreciate any suggestion.

Thanks a lot.

[Updated on: Tue, 17 July 2012 09:47]

Report message to a moderator

Previous Topic:Problem to proxy RAP-Runtime in Nexus
Next Topic:Integration of a RAP application and Spring managed eclipse plugin
Goto Forum:
  


Current Time: Thu Oct 23 18:50:02 GMT 2014

Powered by FUDForum. Page generated in 0.01430 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software