File upload 精细上传器S3-上传前调整图像大小

我正在使用fineUploader3（）将几个图像上载到S3。我想做的是选择一个文件进行上传，调整大小到较小的大小，然后将较小的文件上传到S3而不是原始文件

我尝试在触发“提交”时执行此操作：

on（'submit'，函数（事件、id、文件名）{

})

然而，这似乎不起作用。对S3的调用被中止，或者文件没有写入S3。

你能推荐最好的方法吗？在Fine Uploader中有任何本机支持吗

要调整大小并将dataURL转换为Blob的函数的定义：

函数dataURItoBlob（dataURI）{ var byteString=atob（dataURI.split（'，'）[1]）

}

---

更多信息：

这是我代码中更大的一部分：

jQuery（“#精细上传器”）.fineUploader3({

}).on（'submit'，函数（事件、id、文件名）{

})

还有其他事件的代码，如“已提交”、“取消”、“进度”、“完成”，如果需要，我可以共享这些代码

有了这个，当我尝试上传一个文件时，我在Firebug中看到：

对签名端点URL的请求：

{“过期”：“2013-11-27T14:08:39.751Z”，“条件”：[{“acl”：“公共读取”}，{“bucket”：“xxxxxx.xxxxxx.com”}，{“内容类型”：“图像/jpeg”}，{“成功操作状态”：“200”}，{“键”：“xxxxxx/xxxxxx/20e53c0c-d29e-410c-b2d0-28568661d187e.jpg”}，{“x-amz-meta-qqfilename”：“cbr1.jpg”}，[“内容长度范围”，“150000”]

对此的回应：

{“政策”："中国政府在这方面取得了一些进展。他们在这方面取得了一些进展。他们在这方面取得了一些进展。中国政府在这方面取得了一些进展。中国政府在这方面取得了一些进展。中国政府在这方面取得了一些新的进展。中国政府在这方面取得了一个新的6个中国中国政府在一个中国政府在一个中国政府在一个中国中国政府的一个中国中国政府在一个中国政府的一个中国政府在一个中国政府的一个中国政府的一个中国六六六六个中国中国中国政府在一个中国政府的一个中国政府在一个中国六六六个中国中国的中国政府在一个中国政府的中国政府在一个中国6个中国6个中国6个中国6个中国政府的中国政府的中国政府在一个中国政府在一个中国6个中国6个中国的中国政府的中国政府在一个中国6个中国政府在一个中国6个中国中国的中国政府的中国政府在一个中国6个中国6个中国政府的中国血红蛋白WUIOIJJYNIXLMPWZYJ9LFSIY29UDGVUDC1SZW5NDGGTCMFUZ2UILCIWIWIWIMTUWMDAWMDAIxV19，“签名：”P590iCwLUlTnXo+Ek0e4H/7Z3k0=“”

对S3端点的请求（由于此操作被中止，因此没有响应）：

-----------------------------20840115061520721707779848208内容处置：表单数据；name=“key”xxxxxx/xxxxxxx/20e53c0c-d29e-410c-b2d0-2856861d187e.jpg-----------------------------208401151520721707779848208内容处置：表单数据；name=“AWSAccessKeyId”xxxxxxxxxxxxx -----------------------------20840115061520721707779848208内容配置：表单数据；name=“Content Type”image/jpeg--------------------20840115061520721707779848208内容配置：表单数据；name=“success\u action\u status”200--------------------208401150615207217779848208内容配置：表单数据；name=“acl“公共读取-------------------20840115061520721707779848208内容处理：表单数据；name=“x-amz-meta-qqfilename”cbr1.jpg----------------------------20840115061520721707779848208内容处理：表单数据；name=“策略” 中国政府在这方面取得了一些进展。他们在这方面取得了一些进展。他们在这方面取得了一些进展。中国政府在这方面取得了一些进展。中国政府在这方面取得了一些进展。中国政府在这方面取得了一些新的进展。中国政府在这方面取得了一个新的6个中国中国政府在一个中国政府在一个中国政府在一个中国中国政府的一个中国中国政府在一个中国政府的一个中国政府在一个中国政府的一个中国政府的一个中国六六六六个中国中国中国政府在一个中国政府的一个中国政府在一个中国六六六个中国中国的中国政府在一个中国政府的中国政府在一个中国6个中国6个中国6个中国6个中国政府的中国政府的中国政府在一个中国政府在一个中国6个中国6个中国的中国政府的中国政府在一个中国6个中国政府在一个中国6个中国中国的中国政府的中国政府在一个中国6个中国6个中国政府的中国血红蛋白Wuioijjynix LMPWZYJ9LFSIY29UDGVUDC1SZW5NDGGTCMFUZ2UILCIWIWIWIMTUWMDAWMDAIxV19--------------------20840115061520721707779848208内容处理：表单数据；name=“signature”P590iCwLUlTnXo+Ek0e4H/7Z3k0=------------------------------------20840115061520721707779848208内容处理：表单数据；name=“file”；filename=“cbr1.jpg”内容类型：图像/jpeg

---

未触发“完成”事件。 所以在这种情况下，没有上传任何内容。由于“提交”偶数处理程序-jQuery（“#fine uploader”）.fineUploader3（'cancel'，id'）中的这一行，较大的原始图像没有上载，但问题是大小较小的图像也没有上载

如果你需要更多信息，请告诉我

---

Firebug和Chrome Javascript控制台在Fine Uploader中记录debug:true:

萤火虫：

[FineUploader 3.9.0-3]收到1个文件或输入。 all.fi….min.js（第16行）

[FineUploader 3.9.0-3]正在提交0的S3签名请求 all.fi….min.js（第16行）

[FineUploader 3.9.0-3]正在发送0的POST请求 all.fi….min.js（第16行）

发布我们的签名URL 200 OK 52ms all.fi….min.js（第17行）

[FineUploader 3.9.0-3]正在发送0的上载请求 all.fi….min.js（第16行）

把我们的S3桶寄出去 中止
all.fi….min.js（第19行）

[FineUploader 3.9.0-3]取消0 all.fi….min.js（第16行）

铬：

在Chrome中，它似乎处于无限循环中。我尝试只上传一张照片，我看到：

[FineUploader 3.9.0-3]收到1个文件或输入。所有.fineuploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]提交0 all的S3签名请求。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]发送0 all的POST请求。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]发送0 all的上传请求。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]提交1 all的S3签名请求。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]发送1 all的POST请求。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]全部取消0。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]提交2 all的S3签名请求。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]发送2 all的POST请求。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]取消1所有。FineUploader-3.9.0-3.min.js:16

[FineUploader 3.9.0-3]发送1 all.FineUploader-3.9.0-3.min的上传请求

var uploadedFile = jQuery(this).fineUploader('getFile', id);                        
var reader = new FileReader();
reader.onload = function (e) {
    var smallerImageUrl = resizeImage(e.target.result);
var smallerImageBlob = dataURItoBlob(smallerImageUrl);
jQuery('#fine-uploader').fineUploaderS3('addBlobs', smallerImageBlob);
jQuery('#fine-uploader').fineUploaderS3('cancel', id);
};

reader.readAsDataURL(uploadedFile);

var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}

try {
    return new Blob([ab], {type: mimeString});
} catch (e) {
    var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}

var canvas = document.createElement("canvas");

var img = document.createElement("img");
img.src = source;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);       
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;                 
if (width > height) {
    if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
   width *= MAX_HEIGHT / height;
   height = MAX_HEIGHT;
    }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataUrl = canvas.toDataURL();
return dataUrl;

   uploaderType: 'basic',
   maxConnections: 3,
   button: jQuery('#select'),
   request: {
      endpoint: our endpoint url,
      accessKey: our access key
    },

   objectProperties: {
           acl: 'public-read',
           key: function(id) {
                var regEx = /(?:\.([^.]+))?$/;
                var name = jQuery('#fine-uploader').fineUploaderS3('getName', id);
                var udid = jQuery('#fine-uploader').fineUploaderS3('getUuid', id);
                var extension = regEx.exec(name)[1];
                return location of file on S3;
            }
   },
   signature: {
           endpoint: signature endpoint
   },
   uploadSuccess: {
           endpoint: upload success url,
           params: {
                   type: 'me',
                   width: 170,
                   height: 170
            }
   },
   iframeSupport: {
            localBlankPagePath: blank page url
   },
   retry: {
            showButton: true
   },
   chunking: {
            enabled: true
   },
   resume: {
             enabled: true
   },
   deleteFile: {
             enabled: true,
             method: "POST",
             endpoint: our delete endpoint
   },
   validation: {
             sizeLimit: 15000000
   }

             var uploadedFile = jQuery(this).fineUploader('getFile', id);
             var reader = new FileReader();
             reader.onload = function (e) {
             var smallerImageUrl = resizeImage(e.target.result);
             var smallerImageBlob = dataURItoBlob(smallerImageUrl);
             jQuery('#fine-uploader').fineUploaderS3('addBlobs', smallerImageBlob);
             jQuery('#fine-uploader').fineUploaderS3('cancel', id);
 };
 reader.readAsDataURL(uploadedFile);