Proxy user guide #2

ghrab opened this Issue Mar 28, 2012 · 15 comments


None yet

5 participants

ghrab commented Mar 28, 2012


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.

ghrab commented Mar 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 ?


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.

ghrab commented Mar 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 !


Can you post the code you use to initialize html2canvas please

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


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

ghrab commented Mar 29, 2012

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

ghrab commented Mar 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 :

Thanks for your help and for the great plugin !


Great :)

@niklasvh niklasvh closed this Mar 29, 2012

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!!!



I am trying to use this Proxy. I have created a similar class to Html2CanvasProxyService in my project in Spring. I am testing the proxy with the index.jsp provided with this plugin. I see my proxy being called, but the Icons do not show any image. All I see is a broken image icon on top left.

I guess, dataUrl is empty in my case.




Hello Niklas,

I having taking the screenshot of webpage using html2canvas and that's work fine on localhost but same code is generating a distorted PDF on heroku server.
Could you please let me know the exact reason behind this issue?

Your help will be highly appreciated :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment