2

这是我处理向画布添加图像的代码。这样做是创建一个 Uploadify 实例，它将 SVG 文件上传到本地 [root]/uploads 文件夹。然后它将该图像广告到三个不同尺寸的画布上。绝不会使用 http:// 地址引用图像。对图像路径的所有引用都是本地相对的。

    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;
        }
    });

当我尝试调用 canvas.toDataUrl() 时，我Uncaught Error: SECURITY_ERR: DOM Exception 18在控制台中遇到了问题。有没有办法解决这个问题？如果您需要更多信息，请与我们联系。

4

2 回答 2

4

绝不会使用 http:// 地址引用图像。对图像路径的所有引用都是本地的。

这就是问题所在。您不能以这种方式使用本地文件。这里有一点了解 Canvas 图像安全规则。

如果允许画布将本地文件绘制到自身，那么它可能会绘制本地驱动器上的文件（对您私有），获取其 imageData，并将该文件上传到服务器，从而有效地窃取图像。我们不能这样，所以“本地文件破坏原始干净”规则已经到位。

您实际上可以在 Chrome 中关闭该规则：

C:\Users\theUser\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

但这应该只用于调试。

于 2012-04-17T14:41:40.697 回答
2

这与此处描述的问题相同：Rasterizing an in-document SVG to Canvas

基本上，将任何 SVG 添加到画布都会污染画布，并且无法再在其上调用 toDataURL()。显然，Firefox 12 修复了这个问题，但 Chrome 尚未修复它。

于 2012-04-26T07:28:06.827 回答