使用phonegap上传图像到S3，如何？ [英] Uploading image to S3 using phonegap, how to?

问题描述

我想要一个图像到S3，但不是很成功...这是我的工作到目前为止

  $ cordovaCamera.getPicture（options）.then（function（imageURI）{
 // imageURI将像这样：file：/// some_path 
 
 //从base64数据中获取image 
 var img = Utils.encodeImageUri（imageURI）; 
 
 //从新图像获取base64，不知道是否需要
 var image = new Image（） ; 
 image.src = img; 
 
 
 Utils.uploadToS3（image.src）; 
}，function（err）{}）
 
 ... 
 
 //样板函数创建一个Blob 
 dataURItoBlob：function（dataURI）{
 var binary = atob（dataURI.split（'，'） [1]）; 
 var array = []; 
 for（var i = 0; i  array.push（binary.charCodeAt（i））; 
} 
 
 var mimeString = dataURI.split（'，'）[0] .split（'：'）[1] .split（';'）[0] 
 return new Blob（[new Uint8Array（array）]，{
 type：mimeString 
}）; 
}，
 
 
 //实际上传
 uploadToS3：function（imageData）{
 var imgData = this.getImgData（imageData）; //将返回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）; //这将是我在s3上的图像的路径
 }）; 
} 
  

我所做的只是抓住 base64 数据，创建 Blob 并将其发送到亚马逊

任何想法？

基本上 destinationType c $ c>需要 Camera.DestinationType.DATA_URL

这将返回 imageData 为编码数据。

然后发送到S3，但附加 data：image / jpeg; base64，

查看以下完整代码：

  var options = {
 destinationType：Camera.DestinationType.DATA_URL，//这需要为DATA_URL 
 sourceType：Camera.PictureSourceType.PHOTOLIBRARY //我从库中获取此图像。使用CAMERA如果你采取一张pic 
}; 
 
 $ cordovaCamera.getPicture（options）.then（function（imageData）{
 //确保imageData是base64编码的
 Utils.uploadToS3（'data：image / jpeg ; base64，'+ imageData）; 
 
}，function（err）{
 console.log（err）; 
}）
 
 。
 
 uploadToS3：function（imageData）{
 var imgData = this.getImgData（imageData）; //或者只是硬编码{extension：jpg，type：image / jpeg}如果你只想要jpg 
 var key ='SOME_IMAGE_NAME。'+ imgData.extension; // 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是你的s3图像路径
} 
}）; 
} 
 
 ...帮助... 
 
 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 
}; 
}，
  

I'm trying to get some image onto a S3 but not quite succeeding... Here is my work so far

$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
  });
}

All I am doing is just grabbing the base64 data from the image, creating a Blob and sending it to amazon

I do get a image in the bucket, so sending the data over works, but the image is either black or sometimes broken

Any ideas?

解决方案

Finally.. here is my fix.

Basically the destinationType needs to be Camera.DestinationType.DATA_URL

That will return imageData to be the encoded data.

Then send that to S3, but append data:image/jpeg;base64, so S3 will know what's going on

see full code below:

  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
    };
  },

这篇关于使用phonegap上传图像到S3，如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！