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（）拋出安全異常，儘管圖像是本地的

回答

相關問題