使用phonegap將圖像上傳到S3，如何？

Question

我正在嘗試在S3上獲取一些圖像，但效果不佳...這是到目前為止的工作

$cordovaCamera.getPicture(options).then(function(imageURI) {
  // imageURI will be something like: file:///some_path

  // get the base64 data from the image
  var img = Utils.encodeImageUri(imageURI);

  // get the base64 from a new image, not sure if this is needed
  var image = new Image();
  image.src = img;


  Utils.uploadToS3(image.src);
}, function(err) {})

...

// boilerplate function to create a Blob
dataURItoBlob: function(dataURI) {
  var binary = atob(dataURI.split(',')[1]);
  var array = [];
  for (var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }

  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  return new Blob([new Uint8Array(array)], {
    type: mimeString
  });
},


// the actual upload
uploadToS3: function(imageData) {
  var imgData = this.getImgData(imageData); // will return Object {extension: "jpg", type: "image/jpeg"}
  var data    = this.dataURItoBlob(imageData);

  AWS.config.update({accessKeyId: accessKey, secretAccessKey: secretKey});
  var bucket = new AWS.S3({params:{Bucket: 'testbucket'}});

  var params = {
    Key: 'main.' + imgData.extension,
    Body: data,
    ContentEncoding: 'base64',
    ContentType: imgData.type
  };

  bucket.upload(params, function(err, data) {
    console.log(data.Location); // this will be the path to my image on s3
  });
}

我要做的只是從圖像中獲取base64數據，創建一個Blob並將其發送到亞馬遜

我確實在存儲桶中獲得了一個圖像，因此可以通過工作方式發送數據，但是該圖像要么是黑色的，要么有時會損壞

有任何想法嗎？

Answer 1

最后..這是我的解決辦法。

基本上， destinationType必須為Camera.DestinationType.DATA_URL

這將返回imageData作為編碼數據。

然后將其發送到S3，但附加data:image/jpeg;base64,這樣S3就會知道發生了什么

請參閱下面的完整代碼：

  var options = {
    destinationType: Camera.DestinationType.DATA_URL, // this needs to be DATA_URL 
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY // i am getting this image from the library. Use CAMERA if you wnat to take a pic
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {
    // make sure the imageData is base64 encoded
    Utils.uploadToS3('data:image/jpeg;base64,' + imageData);

  }, function(err) {
    console.log(err);
  })

...

uploadToS3: function(imageData) {
  var imgData = this.getImgData(imageData); // or just hardcode {extension: "jpg", type: "image/jpeg"} if you only want jpg
  var key = 'SOME_IMAGE_NAME.' + imgData.extension; // bucket path after BUCKET_NAME

  AWS.config.update({
    accessKeyId: ACCESS_KEY_HERE,
    secretAccessKey: SECRET_ACCESS_KEY_HERE
  });

  var bucket = new AWS.S3({params: {Bucket: 'BUCKET_NAME_HERE'}});
  var params = {
    Key: key,
    Body: imageData,
    ContentEncoding: 'base64',
    ContentType: imgData.type
  };

  bucket.upload(params, function(err, data) {
    if (err) {
      console.log(err);
    } else {
      //data.Location is your s3 image path
    }
  });
}

... helpers ...

  getImgData: function(img) {
    var extension = 'jpg';
    var type = 'image/jpeg';
    var base64result = img.split(',')[0];
    if (base64result.indexOf("png") > -1) {
      extension = 'png';
      type = 'image/png';
    }

    return {
      extension: extension,
      type: type
    };
  },