이미지로 캔버스를 Firebase 스토리지에 저장할 수 있습니까?

Question

캔버스를 이미지로 저장하려고합니다. 저는 캔버스를 서버에 저장하는 것에 관한 많은 기사와 질문을 읽었으며 아래 코드를 사용하여이를 구현하려고했습니다.

function server(){ 
    canvas = document.getElementById("c"); 
    var storageRef = firebase.storage().ref(); 
    var mountainsRef = storageRef.child('mountains.jpg'); 
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png"); 
    var uploadTask = storageRef.child('images/' + "apple").put(image); 
    uploadTask.on('state_changed', function(snapshot){ 
     // Observe state change events such as progress, pause, and resume 
     // See below for more detail 
    }, function(error) { 
     // Handle unsuccessful uploads 
    }, function() { 
     // Handle successful uploads on complete 
     // For instance, get the download URL: https://firebasestorage.googleapis.com/... 
     var downloadURL = uploadTask.snapshot.downloadURL; 
    }); 
} 

하지만 웹 응용 프로그램을 실행할 때 콘솔이 표시 오류 :

FirebaseError: Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.

어떻게 성공적으로 중포 기지 스토리지에 캔버스를 저장할 수 있습니까?

Answer 1

예 가능합니다. 문제는 dataUrl을 업로드하려고하지만 firebase의 put 함수는 blob 또는 파일 만 제외하고 업로드하는 것입니다. 캔버스를 blob로 변환하려면 toBlob 함수를 사용하십시오.

canvas.toBlob(function(blob){ 
    var image = new Image(); 
    image.src = blob; 
    var uploadTask = storageRef.child('images/' + "apple").put(blob); 
}); 

편집 : var uploadTask = storageRef.child('images/' + "apple").put(blob); 또한

나는 오염 된 캔버스 오류가 발생했습니다 그것을 시도 할 때이 귀하의 경우 작동하는지 확실하지에 var uploadTask = storageRef.child('images/' + "apple").put(image);을 변경했습니다. 나를 위해 일한 무엇

는

내가 두 가지 오류를 받고 있어요이 질문에 지금 How to convert dataURL to file object in javascript?

내가 솔루션 시도