canvas toDataURL（） - 操作不安全

我使用fabric.js在頁面上繪製註釋。現在我想按原樣保存anootated頁面，而不是使用JSON重新繪製服務器端的所有元素。canvas toDataURL（） - 操作不安全

我有主圖像加載：

function redrawPage(src) { 
       var deferred = $q.defer(); 

       fabric.Image.fromURL(src, function (img) { 
        zoom.reset(); 
        transformation.reset(); 

        mainImage = img; 
        mainImage.set({ 
         left: 0, 
         top: 0 
        }); 
        mainImage.hasRotatingPoint = true; 
        mainImage.selectable = false; 

        canvas.clear(); 
        canvas.setWidth(mainImage.getWidth()); 
        canvas.setHeight(mainImage.getHeight()); 
        canvas.add(mainImage); 

        canvas.renderAll(); 

        deferred.resolve(); 
       }); 

       return deferred.promise; 
      }

，當我想給畫布圖像數據存儲爲原始圖像的註釋版本，我得到「操作不安全」的錯誤。從中我載入圖像

function getImageData() { 
    var context = canvas.getContext('2d'), 
     imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

    return imageData.data; 
}

Web服務器不允許crossOrigin設置爲「Anonymus」

來源

2016-01-20 dzona

如果圖像主機不允許匿名訪問，那麼你的，因爲在畫布上有污點.getImageData & .toDataURL總是會失敗。沒有持久的解決方法。

您可以將圖像複製（或重新路由）到您自己的服務器，並將其從與您的網頁相同的域傳送出去。這符合交叉來源限制，因此您的畫布不會受到污染，您的.getImageData將會成功。當然，版權法適用。

還有幾個其他的解決方法，涉及用戶確認他們希望圖像以跨源兼容的方式加載。這裏有一個相關Stackoverflow post。

來源

2016-01-20 19:09:59 markE

圖像從我的子域http // api.mdomain.com呈現，但由於安全原因，我無法允許CORS匿名訪問所有請求 – dzona

Serverside：服務器必須配置爲返回標頭），表明該響應包含授權內容。「'你能給我一個例子如何設置服務器來實現這個 – dzona

我正要說:-) ...除了匿名訪問，你也可以設置你的形象服務器交付給授權目的地。如果您的設計允許向授權客戶端授予憑據，您可以使用憑據來提供跨源兼容圖像。這是一個關於配置啓用CORS的服務器的權威鏈接（http://enable-cors.org/index.html）。 – markE

canvas toDataURL（） - 操作不安全

回答

相關問題