Question

我正在使用Ionic制作应用程序，我希望用户选择图像，裁剪并上传。为此我使用cordova camera plugin和cordova crop plugin。这是我的文件选择器代码：

OpenFilePicker() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: 0  //0 = Chose File; 1 = Take picture
    }

    this.camera.getPicture(options).then((imageData) => {
      //Using the crop plugin:
     this.crop.crop(imageData, {quality: 75})
     .then((newPath) => {
      //Creating the blob
      this.blobimg = new Blob([newPath], {type : 'image/jpeg'});
     })
     .catch((err) => {
     // Handle error crop plugin
     })
    }, (err) => {
     // Handle error camera plugin
    });
  }

然后我将创建的blob上传到firebase存储：

[...]
const imageRef = storageRef.child(`profilePics/photo.jpg`).put(this.blobimg);

它说这是成功的但是上传的图像只有105 B并且都是黑色的（也就是说，它不是真正的图像）。

我在这里做错了什么？

Answer 1

我有完全相同的问题，所以有可能blob没有被完全创建或者不完整 - 我仍然在调查它，所以一旦我找到了它就会回复你溶液

好的我已经破解了!!，你需要使用canvas将图像转换为base64然后将其作为data_url上传到firebase，代码如下，用vuejs写，但我相信你可以重构。

photoUpload: function () {
  var img = new Image()
  var c = document.createElement('canvas')
  var ctx = c.getContext('2d')
  let storage = firebase.storage()
  let storageRef = storage.ref()
  let filesRef = storageRef.child('images/' + this.photo)
  // window.alert(img.src)
  img.onload = function () {
    c.width = this.naturalWidth     // update canvas size to match image
    c.height = this.naturalHeight
    ctx.drawImage(this, 0, 0)
    var dataURL = c.toDataURL('image/jpeg', 0.75)
    filesRef.putString(dataURL, 'data_url')
    .then((snapshot) => {
      window.alert('Uploaded a blob or file!')
      var downloadURL = snapshot.downloadURL
      window.alert(downloadURL)
    }).catch((error) => {
      window.alert(error)
    })
  }
  img.crossOrigin = ''             // if from different origin
  img.src = this.photoURL
},

将图像上传到Firebase存储时出错

1 个答案: