setBackground Fabric.js：CORSの問題

Question

Fabric.jsで作業していますが、私は理解できない1つの問題があります。

Fabric.jsキャンバスの背景を設定したいと思いますが、CORSの問題が発生します。 私はCORS

var canvas = window._canvas = new fabric.Canvas('presenterCanvas'); 
canvas.isDrawingMode = true; 

src = "http://itknowledgeexchange.techtarget.com/overheard/files/2016/12/water-molecule.png"; 

canvas.setBackgroundImage(src, canvas.renderAll.bind(canvas), { 
    crossOrigin: 'anonymous', 
    width: canvas.width, 
    height: canvas.height, 
    originX: 'left', 
    originY: 'top' 
}); 

を使用して背景を設定する方法について読んだことがあると、私はこのエラーを取得：

あなたはjsfiddle上のコードを確認することができます：http://jsfiddle.net/wikett/uvk8xsjf/

なぜ私ができる私は理解していませんそのイメージをHTMLで使用して、ファブリックイメージをキャンバスに追加することはできますが、背景を設定することはできません。 誰もこの問題を助けることができますか？事前に

おかげ

Answer 1

問題はです。はcrossOrigin属性でイメージを読み込むようにファブリックに要求しています。

メディア要素のcrossOrigin属性を設定する場合、そのような要求を受け入れるようにサーバーを正しく設定する必要があります。それ以外の場合は、あなたの場合のように間違っています。

後でエクスポートしたくない場合や、ファブリックのフィルタの一部を適用する必要がない場合は、それを行う必要はありません。

canvas.setBackgroundImage(src, canvas.renderAll.bind(canvas), { 
// crossOrigin: 'anonymous',// Here is your problem 
    width: canvas.width, 
    height: canvas.height, 
    originX: 'left', 
    originY: 'top' 
}); 

updated fiddle

Answer 2

表示画像に制限はありませんが、JavaScriptで（ピクセル値を含む）のデータにアクセスするには制限があります。

ファブリックの背景イメージコードはピクセルデータを読み取ります（おそらくスケーリングのように操作できます）ので、イメージが別の原点から来た場合はCORSを介して許可が必要です。