我想避免上传大/重图像文件。
我更喜欢HTML5 FileAPI库来完成这项工作。
添加了所有其他功能(上传,重新订购等),因此我只需要图片大小调整功能。
CASE:
在页面上有一个输入多个文件。
在输入更改事件(添加文件时)时,调整输入的图像/文件的大小并将它们附加到FormData(),然后通过ajax将FormData()发送到PHP脚本。
示例:
$('input').on('change',function(){
var formData = resizeImages(this.files[0]);
uploadResizedImages(formData);
});
function resizeImages(files){
formData = new FormData();
//For each image, resize it and append to formData
//resize file part missing....
formData.append('files[]',this);//Appending to formData (this = currently iterated file)
return formData;//Return the formData with resized images
}
任何?
由于
答案 0 :(得分:9)
根据我的经验,您无法在客户端操作图像,然后通过表单中的文件输入上传受控图像。
我过去做的事情的方式包括几个步骤。
https://jsfiddle.net/0hmhumL1/
function resizeInCanvas(img){
///////// 3-3 manipulate image
var perferedWidth = 2700;
var ratio = perferedWidth / img.width;
var canvas = $("<canvas>")[0];
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0,0,canvas.width, canvas.height);
//////////4. export as dataUrl
return canvas.toDataURL();
}
当作为dataUrl上传时,您将操作图像的大小(所需带宽)增加约20%,这样您可能看不到所需的节省,除非您大幅改变图像大小。