setBackground Fabric.js : CORS 문제

Question

Fabric.js로 작업하고 있지만 이해할 수없는 문제가 하나 있습니다.

Fabric.js 캔버스의 배경을 설정하고 싶지만 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

는 화상을 표시 에는 제한이 없지만, 자바 스크립트 (화소 값 포함) 데이터 액세스에 제한이있다.

패브릭의 배경 이미지 코드는 픽셀 데이터를 읽습니다 (아마도 스케일링과 같은 조작을 할 수 있으므로). 이미지가 다른 원점에서 나온 경우 CORS를 통해 권한이 필요합니다.