canvas.toDataURL（）抛出安全异常，尽管图像是本地的

这是我的代码，处理图像添加到画布。这样做是创建一个Uploadify实例，它将SVG文件上传到本地[root]/uploads文件夹。然后将该图像广告到三幅不同尺寸的画布上。在任何时候都不会使用http：//地址引用图像。所有对图像路径的引用都是 ~~，相对于本地~~ 。canvas.toDataURL（）抛出安全异常，尽管图像是本地的

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问题。有没有办法来解决这个问题？如果您需要更多信息，请与我们联系。

来源

2012-04-17 Jake

使用文件：//可能是问题，请参阅[http://stackoverflow.com/questions/2704929/uncaught-error-security-err-dom-exception-18][1] [1]：http://stackoverflow.com/questions/2704929/uncaught-error-security-err-dom-exception-18 – danwellman 2012-04-17 08:16:41

@danwellman - 通过本地，我的意思是本地到同一台服务器，而不是我的实际本地机器。没有外部http请求。 – Jake 2012-04-17 08:26:15

@Jake：那么你的意思是“相对”，而不是“本地”。 – 2012-04-17 14:45:21

这是如在此所描述的相同的问题：Rasterizing an in-document SVG to Canvas

基本上，添加任何SVG到画布玷污画布和toDataURL（）不再能够在其上调用。显然，Firefox 12修复了这个问题，但Chrome还没有解决它。

来源

2012-04-26 07:28:06 Jake

在任何时候都不会使用http：//地址引用图像。所有对图像路径的引用都是本地的。

那么这就是问题所在。您不能以这种方式使用本地文件。这里有点understanding the Canvas image security rules.

如果一个画布被允许绘制本地文件到自己，那么它可能会绘制一个文件在您的本地驱动器（私人给你），获取它的imageData，并上传该文件到服务器，有效地窃取图像。我们不能这样做，所以“本地文件打破原点清理”规则就位。

实际上，你可以关闭该规则在Chrome：

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

但是，这应该只用于调试。

来源

2012-04-17 14:41:40

本地，我的意思是服务器本身。您的评论是否仍然适用？我可以通过绝对引用而不是相对引用来解决它吗？ – Jake 2012-04-17 20:08:44

相关的引用应该是正常的，只要有问题的url具有与运行JS的页面相同的域和协议即可。那里有差异吗？（我确实是'console.log（fullpath）'） – 2012-04-17 23:12:54

canvas.toDataURL（）抛出安全异常，尽管图像是本地的

回答

相关问题