使用fabric.fromUrl時出現CORS問題

Question

我正在將fabric.js與angularjs應用程序集成在一起。 我正在從第三方來源（我無法控制）中提取圖像。 我希望對其執行一些操作，例如：過濾，添加到畫布，存儲到畫布以及從畫布重新加載。

我正在使用帶有交叉源的fabric fromurl調用，但是每次都失敗。

 fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {
    canvas1.add(img.set({
        left: 50,
        top: 50,
        angle: 30
    }));
    console.log('CORS enabled + crossOrigin property - DataURL: ', canvas1.toDataURL());
}, {
    crossOrigin: 'Anonymous'
});

小提琴

我做錯了什么嗎？

Answer 1

crossOrigin將僅請求通過CORS使用資源的權限，但服務器可以拒絕它，以防萬一還會使圖像加載全部失敗。

唯一的解決方法是將映像上載到您自己的服務器（不需要crossOrigin ）或使用CORS代理（仍然需要crossOrigin ）或將映像上載到允許使用CORS的主機（imgur.com和dropbox.com幾個例子）。 所有這些變通辦法可能涉及用戶權限問題。

Answer 2

Fabricjs代碼段

 fabric.util.loadImage(img.src, function(any image url on website) {
    var object = new fabric.Image(any image url on website);
    object.set({
      id: 'bg',
      width: 100,
      height: 100,
      left: 20,
      top: 30
    });
    canvas.add(object);

  }, null, {
    crossOrigin: 'anonymous'
  })

避免fabricjs中的Cors問題

1：使用fabric.util.loadImage而不是fabric.Image.fromURL

2： fabric.util.loadImage 3個參數，第三個arg應該是crossOrigin: 'anonymous'像下面的代碼

3：如果要在html中顯示圖像，請在html的圖像標簽中使用crossOrigin = 'anonymous'

4：如果您的網站不安全並且想要從安全網站中提取圖片，則會出現cors錯誤

例如： https vs http

• 您在localhost:7000 （不安全），並且想從https://hello.com/image2.png提取圖像（安全）

• 您在http://www.hiee.com並希望從https://hello.com/image2.png提取圖像（安全）

5：如果仍然出現cors問題，則要從中拉出圖像的服務器也應發送帶有圖像"Access-Control-Allow-Origin", "*"標頭。如何檢出這些標頭，請在瀏覽器中打開圖像標簽，然后firebug-> network，請參閱標題

6： 啟用/禁用瀏覽器中的網絡安全

注意：這是僅適用於本地環境的臨時解決方案，但是當您從其他網絡的瀏覽器訪問相同的url時，CORS問題將再次出現。

Answer 3

嘗試這個：

 fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {
canvas1.add(img.set({
    left: 50,
    top: 50,
    angle: 30
}));
console.log('CORS enabled + crossOrigin property - DataURL: ', canvas1.toDataURL());}, null,{
crossOrigin: 'Anonymous'});

小提琴