This script allows you to use html2canvas.js with different servers, ports and protocols (http, https),
preventing to occur "tainted" when exporting the <canvas> for image.
You do not use ASP Classic, but need html2canvas working with proxy, see other proxies:
- html2canvas proxy in php
- html2canvas proxy in asp.net (csharp)
- html2canvas proxy in python (work any framework)
When adding an image that belongs to another domain in <canvas> and after that try to export the canvas
for a new image, a security error occurs (actually occurs is a security lock), which can return the error:
SecurityError: DOM Exception 18
Error: An attempt was made to break through the security policy of the user agent.
I ask you to follow me or "star" my repository to track updates
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html2canvas asp (vbscript) proxy</title>
<script src="html2canvas.js"></script>
<script>
//<![CDATA[
(function() {
window.onload = function(){
html2canvas(document.body, {
"logging": true, //Enable log (use Web Console for get Errors and Warings)
"proxy":"html2canvasproxy.asp",
"onrendered": function(canvas) {
var img = new Image();
img.onload = function() {
document.body.appendChild(img);
};
img.error = function() {
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
};
})();
//]]>
</script>
</head>
<body>
<p>
<img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false">
</p>
<p>
<img alt="facebook image redirect" src="https://graph.facebook.com/1415773021975267/picture">
</p>
</body>
</html>If you have any problems with the script recommend to analyze the log using the Web Console from your browser:
- Firefox: https://developer.mozilla.org/en-US/docs/Tools/Browser_Console
- Chrome: https://developers.google.com/chrome-developer-tools/docs/console
- InternetExplorer: http://msdn.microsoft.com/en-us/library/gg589530%28v=vs.85%29.aspx
Get NetWork results:
- Firefox: https://hacks.mozilla.org/2013/05/firefox-developer-tool-features-for-firefox-23/
- Chrome: https://developers.google.com/chrome-developer-tools/docs/network
- InternetExplorer: http://msdn.microsoft.com/en-us/library/gg130952%28v=vs.85%29.aspx
An alternative is to diagnose problems accessing the link directly:
http://[DOMAIN]/[PATH]/html2canvasproxy.php?url=http%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D40.714728%2C-73.998672%26zoom%3D12%26size%3D800x600%26maptype%3Droadmap%26sensor%3Dfalse%261&callback=html2canvas_0
Replace [DOMAIN] by your domain (eg. 127.0.0.1) and replace [PATH] by your project folder (eg. project-1/test), something like:
http://localhost/project-1/test/html2canvasproxy.php?url=http%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D40.714728%2C-73.998672%26zoom%3D12%26size%3D800x600%26maptype%3Droadmap%26sensor%3Dfalse%261&callback=html2canvas_0