이미지 업로드가 jQuery없이 Canvas에서 작동하지 않습니까?

HTML5 캔버스와 Fabric JS를 사용하여 사진 편집 응용 프로그램을 만들려고합니다. 내 컴퓨터에서 캔버스로 이미지를 업로드하고 싶습니다. JS : 여기서 코드이다이미지 업로드가 jQuery없이 Canvas에서 작동하지 않습니까?

$ (문서) .ready (함수() {

// Obtain a canvas drawing surface from fabric.js 
var canvas = new fabric.Canvas('tinman'); 
var img = document.getElementById('imageLoader').files[0]; 
var imgInstance = new fabric.Image(img, { 
    left: 100, 
    top: 100, 
    angle: 30, 
    opacity: 0.85

}); canvas.add (img) ;. 나는 파일 업로드에 대해이 HTML 사용하고 있습니다 :

입력 유형 = "파일"ID = "에서는 imageLoader을"/>

나는 알고있다 (문서) .ready()가 이미지 후를 찾기 위해 노력하고있다 $ 로딩하지만 캔버스가 없으면 작동하지 않습니다. init() 함수를 사용하여 jQuery를 사용하지 않고 Fabric을 어떻게 사용할 수 있습니까? 시간 내 주셔서 감사합니다!

출처

2015-01-22 Abhishek Satpathy

먼저 해결

를 호출 init 연료 소모량 body 태그로드됩니다.

//HTML 
<body onload="init()"> 

//JavaScript 
fucntion init(){ 
    var canvas = new fabric.Canvas('tinman'); 
    var img = document.getElementById('imageLoader').files[0]; 
    var imgInstance = new fabric.Image(img, { 
     left: 100, 
     top: 100, 
     angle: 30, 
     opacity: 0.85 
    }); 
} 
canvas.add(img);

두 번째로 가능한 솔루션

자동 호출이 코드는 아래와 같이 곧 페이지가로드되어 실행 기능, 그리고 당신이 아래에 넣어 코드는 다음 해석됩니다.

(function(){ 
    var canvas = new fabric.Canvas('tinman'); 
    var img = document.getElementById('imageLoader').files[0]; 
    var imgInstance = new fabric.Image(img, { 
     left: 100, 
     top: 100, 
     angle: 30, 
     opacity: 0.85 
    }); 
})(); 
canvas.add(img);

출처

2015-01-22 15:00:51 Adi

감사합니다! 이제 알겠습니다. –

이미지 업로드가 jQuery없이 Canvas에서 작동하지 않습니까?

답변

관련 문제