Add support for loading cross origin images using proxy

This commit is contained in:
MoyuScript
2017-09-04 23:36:19 +08:00
parent 286be1f6f0
commit 5ad8639bc6
10 changed files with 122 additions and 17 deletions

View File

@ -9,13 +9,13 @@
font-family: Arial;
}
</style>
<base href="http://www.google.com/" />
<base href="http://localhost:8081/" />
</head>
<body>
<h1>External image</h1>
<img src="http://www.google.com/logos/2011/gregormendel11-hp.jpg" style="border:5px solid black;" />
<img src="http://localhost:8081/assets/image2.jpg" style="border:5px solid black;" />
<h1>External image (using &lt;base&gt; href)</h1>
<img src="/logos/2011/gregormendel11-res.jpg" />
<img src="/assets/image_1.jpg" />
</body>
</html>

View File

@ -15,6 +15,6 @@
</head>
<body>
<h1>External image (CORS)</h1>
<img src="http://localhost:8081/tests/assets/image2.jpg" />
<img src="http://localhost:8081/cors/tests/assets/image2.jpg" />
</body>
</html>

View File

@ -5,6 +5,7 @@ const fs = require('fs');
const webpack = require('webpack');
const config = require('../webpack.config');
const serveIndex = require('serve-index');
const proxy = require('html2canvas-proxy');
const PORT = 8080;
const CORS_PORT = 8081;
@ -17,8 +18,9 @@ app.listen(PORT, () => {
});
const corsApp = express();
corsApp.use(cors());
corsApp.use('/', express.static(path.resolve(__dirname, '../')));
corsApp.use('/proxy', proxy());
corsApp.use('/cors', cors(), express.static(path.resolve(__dirname, '../')));
corsApp.use('/', express.static(path.resolve(__dirname, '.')));
corsApp.listen(CORS_PORT, () => {
console.log(`CORS server running on port ${CORS_PORT}`);
});

View File

@ -6,7 +6,14 @@ var REFTEST = window.location.search.indexOf('reftest') !== -1;
(function(document, window) {
function appendScript(src) {
document.write(
'<script type="text/javascript" src="' + src + '.js?' + Math.random() + '"></script>'
'<script type="text/javascript" src="' +
window.location.protocol +
'//' +
window.location.host +
src +
'.js?' +
Math.random() +
'"></script>'
);
}
@ -147,7 +154,7 @@ var REFTEST = window.location.search.indexOf('reftest') !== -1;
$.extend(
{
logging: true,
proxy: 'http://localhost:8082',
proxy: 'http://localhost:8081/proxy',
useCORS: false,
removeContainer: false,
target: targets

View File

@ -118,6 +118,7 @@ const assertPath = (result, expected, desc) => {
.html2canvas(testContainer.contentWindow.document.documentElement, {
removeContainer: true,
backgroundColor: '#ffffff',
proxy: 'http://localhost:8081/proxy',
...(testContainer.contentWindow.h2cOptions || {})
})
.then(canvas => {