Drawing an svg containing html in a canvas with safari

Question

I\'m trying to create some thumbnails of dynamically created pages for a website, i have found a solution by adding the html in a svg which I then draw on an image inside a canv

Answer 1

You don't state what you get in console on the Blob nor the URL.

Just a shot but you are revoking the url right after setting it as source on the image. You need to revoke if after the image has been loaded in the onload event:

img.onload = function() {                   
    DOMURL.revokeObjectURL(url);      /// here
    context.drawImage(img, 100, 100);                                       
};

img.src = url;
//DOMURL.revokeObjectURL(url);        /// not here

See that helps out. If not then you're probably dealing with a Safari specific issue. (your canvas specific translate etc. should also be inside the onload event or at least called before you set the src property).

Answer 2

Basically the solution was to put the mime type(data:image/svg+xml) in the variable containing the svg, this way you don't need to use the blob anymore and then to set the img src with the svg before drawing it to the canvas.

var canvas = document.getElementById('canvasTest'),
            context = canvas.getContext('2d');

            var data = "data:image/svg+xml,"+"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
                 "<foreignObject width='100%' height='100%'>" +
                   "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                     "<div xmlns='http://www.w3.org/1999/xhtml'>aaaa<span>aaaa</span></div>" +
                   "</div>" +
                 "</foreignObject>" +
               "</svg>"
            ;

            var img = new Image();

            img.src = data;

            img.onload = function() {
                context.drawImage(img, 100, 100);                   
            };

            context.translate(canvas.width / 2, canvas.height / 2);
            context.scale(0.4, 0.4);