Question

Here’s my code that deals with adding an image to the canvas. What this is doing is creating an instance of Uploadify, which uploads SVG files to the local [root]/uploads folder. Then it ads that image to three canvases of different sizes. At no point is the image referenced using an http:// address. All references to the image path are local relative.

    var folder = '/uploads';
    var fullpath = folder + '/' + $('input#canonical').val() + ".svg";
    $('#file_upload').uploadify({
        'uploader': '/uploadify/uploadify.swf',
        'script': '/uploadify/uploadify.php',
        'cancelImg': '/uploadify/cancel.png',
        'folder': folder,
        'fileExt': '*.svg',
        'fileDesc': 'SVG files',
        'scriptData':   {'rename': $('input#canonical').val() + ".svg"},
        'onAllComplete': function(){
            $('#upload-wrap').hide();

            var img = new Image();
            img.onload = function(){

                var ar = img.width / img.height;
                var swidth = ( ar >= 1 ) ? small : small * ar;
                var mwidth = ( ar >= 1 ) ? medium : medium * ar;
                var lwidth = ( ar >= 1 ) ? large : large * ar;

                var sheight = ( ar <= 1 ) ? small : small / ar;
                var mheight = ( ar <= 1 ) ? medium : medium / ar;
                var lheight = ( ar <= 1 ) ? large : large / ar;

                var sc = sCanvas.getContext('2d');    
                var mc = mCanvas.getContext('2d');   
                var lc = lCanvas.getContext('2d');    

                scObj.css({width:swidth, height: sheight});
                mcObj.css({width:mwidth, height: mheight});
                lcObj.css({width:lwidth, height: lheight});

                sc.drawImage(img,0,0,swidth,sheight);
                mc.drawImage(img,0,0,mwidth,mheight);
                lc.drawImage(img,0,0,lwidth,lheight);
            };
            img.src = fullpath;
        }
    });

When I try to call canvas.toDataUrl(), I get the Uncaught Error: SECURITY_ERR: DOM Exception 18 problem in the console. Is there a way to fix this? Let me know if you need more information.

Answer 1

This is the same problem as described here: Rasterizing an in-document SVG to Canvas

Basically, adding any SVG to a canvas taints the canvas and toDataURL() can no longer be called on it. Apparently, Firefox 12 fixes this, but Chrome has yet to fix it.