rasterizeHTML.js
rasterizeHTML.js copied to clipboard
cburgmer
huge input lookup error in safari
I found when I put more than about 7M pictures in my html, safari will report an error as a huge input lookup. There is my demo to show this issue:
<!DOCTYPE>
<html>
<head></head>
<body></body>
<script type="text/javascript" src='https://g.alicdn.com/platform/c/rasterizehtml/1.2.4/dist/rasterizeHTML.allinone.js'></script>
<script>
var html = '<html data-reactroot="" data-react-checksum="38979617">'+
'<head></head>'+
'<body class="ais-node yellow" data-spm="7794127">'+
'<img src="https://img.alicdn.com/tfs/TB17CQdSXXXXXajXpXXXXXXXXXX-2800-940.png">'+
'<img src="https://img.alicdn.com/tfs/TB17CQdSXXXXXajXpXXXXXXXXXX-2800-940.png">'+
'<img src="https://img.alicdn.com/tfs/TB17CQdSXXXXXajXpXXXXXXXXXX-2800-940.png">'+
'<img src="https://img.alicdn.com/tfs/TB17CQdSXXXXXajXpXXXXXXXXXX-2800-940.png">'+
'<img src="https://img.alicdn.com/tfs/TB17CQdSXXXXXajXpXXXXXXXXXX-2800-940.png">'+
'<img src="https://img.alicdn.com/tfs/TB17CQdSXXXXXajXpXXXXXXXXXX-2800-940.png">'+
'<img src="https://img.alicdn.com/tfs/TB17CQdSXXXXXajXpXXXXXXXXXX-2800-940.png">'+
// '<img src="https://img.alicdn.com/tfs/TB17CQdSXXXXXajXpXXXXXXXXXX-2800-940.png">'+
'</body></html>';
rasterizeHTML.drawHTML(html).then(function (renderResult) {
console.log('finish!!!!')
var img = renderResult.image;
document.body.appendChild(img);
},function(e){
console.error('error!!!!!!!',e)
})
</script>
</html>
It can work as normal in Chrome but failed in safari. My safari version is 10.1.1, could you please look at this issue and give me some advice ASAP? Thanks a lot.
Hey, after a quick check I was able to load 20 files, each 322K big. It's possible that Safari has a max limit on AJAX requests. Can you share the error and the stacktrace?
I was able to load 27 files, each 272K big, but failed when I tried to load 28 files. As a comparison, I loaded 35 files each 5K big and it worked well. So I suspect that is because the size of loading files is more than 7+M big but not the limit of ajax requests. The error message is : b.html:57error! – {message: "Invalid source", originalError: Error: error on line 1 at column 10367211: internal error: Huge input lookup} .
The error message Huge input lookup seems to be from the browser itself. A quick search found this https://stackoverflow.com/questions/39930999/internal-error-huge-input-lookup-on-safari-when-parse-xml-to-json. My second guess now is as follows:
- This library will load all assets and inline those in a big HTML page, then serialise the HTML page into an XML document, and finally embed this in an SVG.
- To make sure nothing went wrong in the process, and because the browser would just silently fail when rendering an invalid SVG, the library will do one defensive check here https://github.com/cburgmer/rasterizeHTML.js/blob/master/src/document2svg.js#L72.
- This check uses the browser's XML parser (https://github.com/cburgmer/rasterizeHTML.js/blob/master/src/browser.js#L265) and checks for parse errors. (If you follow the code, you'll see the message
Invalid source). - The last check fails due to the Safari limitation mentioned above.
What can we do? Remove the check, and possibly Safari will render this SVG nicely. However we'll inconvenience a lot of other users as they won't get a warning, i.e. something went wrong in the rendering process.
If you want you can first build your own version of the library without this explicit check. Let me know if you need help with that. Then we can see if there's something specific we can do!
@cburgmer : Can you provide a flag in the code as an option to enable/disable this validation ? That could save us some trouble and can be a workaround on the safari browsers. In the meanwhile if you please share the steps or a branch to build the code without check, it would be a great help.
