Question

我正在使用ember uploader，以便在我按照here

所述的服务器上的图片上传签名后，从我的客户端直接将文件上传到Amazon S3

现在我要做的是调整图片大小以创建缩略图，然后再上传到Amazon S3。这样我就可以将两张图片上传到Amazon S3。一个是原始图像，另一个是缩略图。

目前我正在使用HTML 5画布来调整图像大小：

var MAX_HEIGHT = 300;
function render(src){
  var image = new Image();
  image.onload = function(){
    var canvas = document.getElementById("myCanvas");
    if(image.height > MAX_HEIGHT) {
      image.width *= MAX_HEIGHT / image.height;
      image.height = MAX_HEIGHT;
    }
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0, image.width, image.height);

  };
  image.src = src;
}

我可以在HTML 5画布中调整图像大小。我面临的问题是我正在努力将图像重新放回文件对象中，以便Ember Uploader签名并发送到Amazon S3。

这是处理实际上传的代码：

if (!Ember.isEmpty(files)) {
  uploader.upload(files[0]); // Uploader will send a sign request then upload to S3
}

如您所见，正在上载FileList数组的第一项。我希望能够附加画布＆＃39;缩放图像到此FileList，以便迭代FileList，然后签名并将这两个图像上传到Amazon S3。

我知道可以使用canvas.toDataURL将画布转换为数据网址，但是可以将画布转换为文件对象，还是应该以不同的方式进行调整大小和上传？

谢谢！

从Ember JS直接将文件上传到Amazon S3

0 个答案: