Как сохранить холст как изображение в хранилище Firebase?

Я пытаюсь сохранить холст как изображение в хранилище firebase. Я прочитал много статей и вопросов о сохранении холста на сервере и попытался реализовать то же самое с приведенным ниже кодом.

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: недопустимый аргумент в put с индексом 0: ожидаемый BLOB-объект или файл.

Как я могу успешно сохранить холст в хранилище Firebase?


firebase javascript firebase-storage storage html5-canvas
person pavitran    schedule 17.06.2016    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Да, это возможно. Проблема, с которой вы столкнулись, заключается в том, что вы пытаетесь загрузить dataUrl, но функция put firebase исключает только капли или файлы. Чтобы преобразовать холст в большой двоичный объект, используйте функцию 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(image); на var uploadTask = storageRef.child('images/' + "apple").put(blob);

Также не уверен, сработает ли это в вашем случае, когда я попробовал, у меня возникла испорченная ошибка холста.

Для меня сработало ответ на этот вопрос Как преобразовать dataURL в файл объект в javascript?

person alecschrader    schedule 05.07.2016
comment
Я пробовал ваше решение, но теперь получаю две ошибки Firebase Storage: Invalid argument in put at index 0: Expected Blob or File. и http://localhost:11080/[object%20Blob] 404 (Not Found) - person pavitran; 05.07.2016
comment
ERROR DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported. для меня - person Emerica; 29.04.2019
comment
@Emerica Используйте image.setAttribute ('crossorigin', 'anonymous'); - person Don Dilanga; 26.05.2020