I draw an image on HTML5 canvas, and the source of the image is an SVG string. Then I getImageData of the canvas, this works well in Firefox and Chrome, but in IE11 it will invoke a security error.
I write a simple test page to reproduce my problem.
<!DOCTYPE html>
<html>
<body>
<p>
Click to run the function
<button type="button" onclick="myFunction()">run</button>
</p>
<canvas id="myCanvas" width="300" height="150" style="border: 1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var svgString = "<svg stroke='black' width='50' height='50' xmlns='http://www.w3.org/2000/svg'><ellipse class='black' rx='29%' ry='29%' cy='50%' cx='50%' fill='transparent'/><svg width='100%' height='100%' viewBox='0 0 50 50' preserveAspectRatio='none' ><text class='blue' text-anchor='middle' font-size='24' y='33' x='25'>9</text></svg></svg>";
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
img.src = "data:image/svg+xml," + encodeURIComponent(svgString);
var myFunction = function () {
var imgData = ctx.getImageData(20, 20, 1, 1);
alert(imgData.data[0] + "," + imgData.data[1] + "," + imgData.data[2]);
};
</script>
</body>
</html>
I found some work around used XMLHttpRequest, but their image source is a real URL not a SVG string.
So is there any way to use SVG string as an image source, but not invoking security error in IE11 when getImageData?
