Skip to content


Proxy user guide #2

ghrab opened this Issue · 12 comments

3 participants



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.


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.


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 ?


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.


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 !


Can you post the code you use to initialize html2canvas please


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,', '');
"proxy": proxyURL,
"logging" : true



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


I'm using v0.33,
I guess the function that is calling the proxy is :

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


The proxy is called on

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).


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

I've switched the if statements order on loadImage :

Thanks for your help and for the great plugin !


Great :)

@niklasvh niklasvh closed this

I added html2canvas proxy. And its working fine in my server for online images. but when I uploaded to other server online image is not showing. I don't know what is the issue. Please help me with this.
Here is my code:
function capture() {
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
"onrendered": function(canvas) {
//Submit the form manually
My link:- (working fine).
Is any thing I need to activate or not enabled for this html2canvas proxy in my server?
Please help!!!

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.