Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Proxy user guide #2

Closed
ghrab opened this Issue March 28, 2012 · 11 comments

2 participants

Amine Niklas von Hertzen
Amine
ghrab commented March 28, 2012

Hello,

Could you provide us a guide on how to use this proxy with html2canvas.
On localhost the canvas generation works fine, however when uploaded to the server, I'm facing the error : Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

Thanks in advance.

Niklas von Hertzen
Owner

As far as this proxy goes, its ready to run as it is, and you'd just need to define the proxy parameter to the url of the proxy.

If however canvas generation works locally without the need for a proxy, then you might wanna check that the images are loaded from the same origin on your server.

Amine
ghrab commented March 28, 2012

Thanks for the quick answer,

In fact the images are hosted by a service with a different domain than the server running the app.
So they do not belong to the same origin.
I've thought that by using a proxy, I could translate the images sources as if they were hosted on our servers.

Is there a workaround this ?

Niklas von Hertzen
Owner

The proxy is there for that exact reason, to allow images to be used from outside of the origin. It loads the images, and returns them as a base64 encoded string, allowing html2canvas load them in.

Without a proxy, you won't be able to load images from cross origin, unless the browser supports CORS and the images are served with the CORS header enabled.

Amine
ghrab commented March 28, 2012

When working on localhost we do not use the image service so the problem is not encountered.
Now on the production version, we included the proxy script on our server and it requires a url and a callback.
My question is should I provide them on the Preload function, or alter the html2canvas code.
An example is much appreciated.

Thanks again !

Niklas von Hertzen
Owner

Can you post the code you use to initialize html2canvas please

Amine
ghrab commented March 28, 2012

I've made some changes to the html2canvas file to get a snapshot of the required element with the correct size.
The call is initiated below :

html2canvas.Preload(el, {
"complete" : function(images) {

var queue = html2canvas.Parse(el, images);
var canvas = html2canvas.Renderer(queue);
var img = canvas.toDataURL('image/png;base64');

img = img.replace('data:image/png;base64,', '');
processImg(img);
},
"proxy": proxyURL,
"logging" : true
});

};

Niklas von Hertzen
Owner

That code should work as expected, assuming the proxyURL is correct. Which version of html2canvas are you using?

Amine
ghrab commented March 29, 2012

I'm using v0.33,
I guess the function that is calling the proxy is : https://github.com/niklasvh/html2canvas/blob/master/src/Preload.js#L59

But I don't see clearly how the proxy is being called.

Niklas von Hertzen
Owner

The proxy is called on https://github.com/niklasvh/html2canvas/blob/master/src/Preload.js#L269

Note that the file you are viewing there has had its API changed quite a bit since 0.33 (you can see how the API is called in the new version by browsing the jquery plugin for example).

Amine
ghrab commented March 29, 2012

Well, now it's working,
The problem was that the proxy wasn't called.

I've switched the if statements order on loadImage : https://github.com/niklasvh/html2canvas/blob/master/src/Preload.js#L230

Thanks for your help and for the great plugin !

Niklas von Hertzen niklasvh closed this March 29, 2012
Niklas von Hertzen
Owner

Great :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.