mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Fix cors loading of images

Browse Source
This commit is contained in:
Niklas von Hertzen 2014-05-18 17:40:01 +03:00
parent b7595e19e9
commit 9ee87339a3
5 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Gruntfile.js
View File

@ -38,6 +38,26 @@ module.exports = function(grunt) {
keepalive: true
}
},
cors: {
options: {
port: 8081,
base: './',
keepalive: false,
middleware: function(connect, options, middlwares) {
return [
function(req, res, next) {
if (req.url !== '/tests/assets/image2.jpg') {
next();
return;
}
res.setHeader("Access-Control-Allow-Origin", "*");
res.end(require("fs").readFileSync('tests/assets/image2.jpg'));
},
connect.static(options.base[0])
];
}
}
},
ci: {
options: {
port: 8080,
@ -85,9 +105,9 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-connect');
// Default task.
grunt.registerTask('server', ['connect']);
grunt.registerTask('server', ['connect:cors', 'connect']);
grunt.registerTask('build', ['concat', 'uglify']);
grunt.registerTask('default', ['jshint', 'concat', 'qunit', 'uglify']);
grunt.registerTask('travis', ['jshint', 'concat','qunit', 'uglify', 'connect:ci', 'webdriver']);
grunt.registerTask('travis', ['jshint', 'concat','qunit', 'uglify', 'connect:ci', 'connect:cors', 'webdriver']);
};

2
package.json
View File

@ -30,7 +30,7 @@
"png-js": ">= 0.1.1",
"baconjs": "0.7.11",
"wd": "~0.2.7",
"grunt-contrib-connect": "~0.6.0"
"grunt-contrib-connect": "0.7.1"
},
"scripts": {
"test": "grunt travis --verbose"

4
src/imageloader.js
View File

@ -2,7 +2,7 @@ function ImageLoader(options, support) {
this.link = null;
this.options = options;
this.support = support;
this.origin = window.location.protocol + window.location.hostname;
this.origin = window.location.protocol + window.location.hostname + window.location.port;
}
ImageLoader.prototype.findImages = function(nodes) {
@ -60,7 +60,7 @@ ImageLoader.prototype.isSameOrigin = function(url) {
var link = this.link || (this.link = document.createElement("a"));
link.href = url;
link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
var origin = link.protocol + link.hostname;
var origin = link.protocol + link.hostname + link.port;
return (origin === this.origin);
};

17
tests/cases/images/base.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>External content tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<base href="http://www.google.com/" />
</head>
<body>
<h1>External image</h1>
<img src="http://www.google.com/logos/2011/gregormendel11-hp.jpg" style="border:5px solid black;" />
<h1>External image (using &lt;base&gt; href)</h1>
<img src="/logos/2011/gregormendel11-res.jpg" />
</body>
</html>

14
tests/cases/images/cross-origin.html
View File

@ -3,19 +3,13 @@
<head>
<title>External content tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
h2cOptions = {useCORS: true};
</script>
<script type="text/javascript" src="../../test.js"></script>
<base href="http://www.google.com/" />
</head>
<body>
<h1>External image</h1>
<img src="http://www.google.com/logos/2011/gregormendel11-hp.jpg" style="border:5px solid black;" />
<h1>External image (using &lt;base&gt; href)</h1>
<img src="/logos/2011/gregormendel11-res.jpg" />
<h1>External image (CORS)</h1>
<img src="http://publishmydata.com/assets/home/blue_bg.png" />
<img src="http://localhost:8081/tests/assets/image2.jpg" />
</body>
</html>