Proxy user guide

[ghrab]

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.

[niklasvh]

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]

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 ?

[niklasvh]

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]

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 !

[niklasvh]

Can you post the code you use to initialize html2canvas please

[ghrab]

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 });
};

[niklasvh]

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

[ghrab]

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.

[niklasvh]

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

[ghrab]

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 !

[niklasvh]

Great :)

[alokroutray]

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() { $('#target').html2canvas({ "logging": true, //Enable log (use Web Console for get Errors and Warnings) "proxy":"html2canvasproxy.php", "onrendered": function(canvas) { $('#img_val').val(canvas.toDataURL("image/png")); //Submit the form manually document.getElementById("myForm").submit(); } }); } My link:- http://wpapply.com/aloktest (working fine). Is any thing I need to activate or not enabled for this html2canvas proxy in my server? Please help!!!

[rajtest11]

Hi,

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.

Ideas?

regards -Raj

[alokroutray]

Image need to be store in same server.

Regards, Alok Kumar Routray

http://www.behance.net/alokkumarroutray https://in.linkedin.com/in/routrayalok https://in.linkedin.com/in/routrayalok http://orangescorpio.com/ http://orangescorpio.com/

Skype : alokkumarroutray Mobile : +91-720-5255-859

On Sat, Dec 31, 2016 at 4:16 AM, rajtest11 notifications@github.com wrote:

Hi,

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.

Ideas?

regards -Raj

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/niklasvh/html2canvas-proxy/issues/2#issuecomment-269831448, or mute the thread https://github.com/notifications/unsubscribe-auth/AEFlnSnQBJzLQA9lDFImIFaMpDIgdMyPks5rNYm2gaJpZM4F_Rhy .

[gauravmishra24]

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

[maria-negrea]

Hello!

I am having issues understanding how the proxy should be configured. According to the documentation, the proxy option should be set to "Url to the proxy which is to be used for loading cross-origin images..." and it is given as an example of an available proxy this one: https://github.com/niklasvh/html2canvas-proxy-nodejs. From the documentation, I understood that it should look like this:

html2canvas(document.body, { proxy: "https://github.com/niklasvh/html2canvas-proxy-nodejs", useCORS: true }).then(function(canvas) { document.body.appendChild(canvas); });

The problem is that I am getting this error: "Access to XMLHttpRequest at 'https://github.com/niklasvh/html2canvas-proxy-nodejs/blob/master/server.js?url=http%3A%2F%2Flocalhost%3A33106%2F&responseType=blob' from origin ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I mention that I am working on an ASP.NET MVC project, with only Javascript & jQuery on the client side and the 1.0.0-alpha.11 version of html2canvas and I don't have any experience in working with node.js (So maybe things are clear for other people, but I just haven't got it). Can you help me figure out how the setup should look in this case?

Thank you for your help!

[iamgoodbytes]

Hi @maria-negrea, the url should be a url where you are running the proxy script on a server, in this case a server that can run nodejs.

There, you can start the proxy in nodejs as mentioned in the docs, somewhat like this:

var proxy = require('html2canvas-proxy');
var express = require('express');

var app = express();
var port = (process.env.PORT || 3000);

app.use("/", proxy());

console.log("Server running on port", port);
app.listen(port);

Then you can point the 'proxy' to your server endpoint. I hope that makes more sense.

[maria-negrea]

Thank you for the explanation! It makes more sense now.

[zeusstl]

Sent a pull request with info on usage and testing with the proxy. Until it is accepted and committed, here is a link to my fork: https://github.com/zeusstl/html2canvas-proxy-nodejs

[S-Fahmy]

None of this crap is working, the proxy isn't just loading, what a crap plugin with an utterly crap documentation, total waste of time. the amount of time I spent working with this sh*t would have been saved if I've developed what I need for my use case from scratch.

[hyl1374961656]

我有两张一个服务器上的图片 在页面上能正常显示生成图片时一张会No 'Access-Control-Allow-Origin' header is present on the requested resource. 把他们单独拿出来请求请求方式和请求头也没有区别

[asvinp]

In case it helps some one else, if using proxy:

useCORS: false, // Needs to be false to use proxy

Based on this

In HTML2Canvas do not use these configuration options (or set them to false):

allowTaint useCors