使用phonegap将图片上传到S3,怎么样?

时间:2015-08-05 23:44:12

标签: javascript cordova amazon-s3 phonegap-plugins image-uploading

我试图将一些图像放到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并将其发送到亚马逊

我确实在存储桶中获得了一个图像,因此将数据发送到工作中,但图像为黑色或有时会损坏

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

最后..这是我的修复。

基本上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
    };
  },