So as part of handling downloads of some reports on my site, images are exported from the site to a script on the same domain to generate a download, however it appears to only throw a SecurityError.
This is not similar to other questions, strictly because the source of the image is the same domain. I'm not pulling it from another site.
I surmise this has something to do with IE9 treating data URLs as tainted and rejecting my efforts. It's the only thing I could guess.
Code:
//i is part of a loop, this is referring to a Vue instance, but that shouldn't matter
var svg = this.charts[i].getSVG(); //Highcharts method.
var svgSize = {height: this.charts[i].chartHeight ,width: this.charts[i].chartWidth};//svg.getBoundingClientRect();
var canvas = document.createElement('canvas');
canvas.height = svgSize.height;
canvas.width = svgSize.width;
var ctx = canvas.getContext('2d');
//Image it up
var img = document.createElement('img');
img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))));
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function() {
ctx.drawImage(img, 0, 0);
//Add the image
var url = canvas.toDataURL('image/png'); //ERROR HERE
//url is stored into an array, irrelevant.
//If it exists in the next element, continue;
if(typeof self.charts[i+1] != "undefined") { self.generateChartByIdx(i+1); }
};
Throws SCRIPT5022: SecurityError
