Javascript 在上载表单之前重新调整图像大小

我已经阅读了多篇文章，但仍然有问题，尽管我试图实现的东西对我来说很常见。 我有一个表单，在其他输入字段中允许附加图像

<form action="add2.php" method="post" enctype="multipart/form-data" id="addform">

... some input fields

<input name="uploadfile3" type="file" id="i3_file" onchange="handleFiles('i3_file')" />

<input type="submit" name="submit" value="Submit listing" class="submit"/>
</form>

我正在寻找基本的大小调整在2的倍数与JPEG作为目标图像，无论源

谢谢分享你的经验

编辑：我对建议的文章很熟悉，但似乎有一些不同：1）我试图在表单中加载调整大小的图像；2） 我没有使用Ajax。 这是我的HTML：

<input name="uploadfile" type="file" id="i1_file" onchange="resize('i1_file', 'uploadfile', 'addform')"  />

这是我的resize（）函数，用于上载具有原始名称的零大小文件：

 function resize(inputid,  inputname,  formid)
{
    //Check if File interface is supported
    if (window.File && window.FileReader && window.FileList && window.Blob)
    {
        var inpFiles = document.getElementById(inputid);
        var file = inpFiles.files[0];
        //var inpFiles = document.getElementById('i_file');
        //get the file size and file type from file input field
        var fsize = file.size;
        var ftype = file.type;
        var fname = file.name;
        var c = 3 - inputid.substr(1,1);
        if (c == 0) c = 'no';


        if (ftype.indexOf("jpeg") < 0 && ftype.indexOf("png") < 0)
              {
                  alert(ftype + " is not a valid image type!");
              } else if (fsize == 0)
                   {
                     alert("Invalid file size: " + fsize +" bites\nTry another image");
                   } else if
                       ((fsize > 1048576) && (fsize < 4194304)) //Resize if file size more than 1 mb (1048576) but less than 4 mb
                       {
                          alert("Resizing " + fsize +" bites\n of " + fname);
                           var dataurl = null;
                           // create <img> element
                           var img = document.createElement("img");
                           var reader = new FileReader();  
                           reader.onload = function(e) {
                            img.src = e.target.result;

                           // Once you have the image preview in an <img> element, you can draw this image in a <canvas> element to pre-process the file.

                            var canvas = document.createElement("mycanvas");
                            var context = canvas.getContext('2d'); 
                            context.drawImage(img, 0, 0);

                                  var width = file.naturalWidth;
                                  var height = file.naturalHeight;
                                  if ((width > 1024) && (width > height)) 
                                  {
                                    var new_width = 1024;
                                    var ratio = new_width / width;
                                    var new_height = Math.round(height * ratio);
                                    }  
                                    else if (height > 768)
                                     {
                                        var new_height = 768;
                                        var ratio = new_height / height;
                                        var new_width = Math.round(width * ratio);
                                     }
                                    else
                                    {
                                       var new_width = width;
                                       var new_height = height;
                                    }
                                    document.write("new_height: " + new_height + "<br />");
                                    canvas.width = new_width;
                                    canvas.height = new_height;
                                    var context = canvas.getContext('2d'); 
                                    context.drawImage(img,0,0,new_width, new_height);
                                    // save canvas as dataUrl
                                    dataurl = canvas.toDataURL("image/jpeg", 0.8);

                                    var fd = new FormData(document.getElementById(formid));
                                    // convert dataUrl into blob
                                    var blobBin = atob(dataurl.split(',')[1]);
                                    var array = [];
                                    for(var i = 0; i < blobBin.length; i++) {
                                    array.push(blobBin.charCodeAt(i));
                                    }
                                    var newfile = new Blob([new Uint8Array(array)], {type: 'image/jpeg', name: fname});

                                    fd.append(inputid, newfile); // blob file

                              } //onload

                              reader.readAsDataURL(file);


                       }else if (fsize > 4194304)
                             {
                               alert("Too big: " + fsize +" bites\nResize or use another image");
                              }else
                                  {
                                    alert("Good: " + fsize +" bites\nType: " + ftype +"\nYou can add " + c + " more below");
                                  }
    }else{
        alert("Please upgrade your browser ,\n cannot handle files!");
    }

};

函数调整大小（inputid、inputname、formid）
{
//检查是否支持文件接口
if（window.File&&window.FileReader&&window.FileList&&window.Blob）
{
var inpFiles=document.getElementById（inputid）；
var file=inpFiles.files[0]；
//var inpFiles=document.getElementById（'i_file'）；
//从文件输入字段获取文件大小和文件类型
var fsize=file.size；
var ftype=file.type；
var fname=file.name；
变量c=3——输入子变量（1,1）；
如果（c==0）c='no'；
if（ftype.indexOf（“jpeg”）<0&&ftype.indexOf（“png”）<0）
{
警报（ftype+“不是有效的图像类型！”）；
}else if（fsize==0）
{
警报（“无效文件大小：“+fsize+”位\n尝试其他图像”）；
}否则如果
（（fsize>1048576）和&（fsize<4194304））//如果文件大小大于1 mb（1048576）但小于4 mb，则调整大小
{
警报（“调整大小”+fsize+“+fname的\n位”）；
var-dataurl=null；
//创建元素时，可以在元素中绘制此图像以预处理文件。
var canvas=document.createElement（“mycanvas”）；
var context=canvas.getContext（'2d'）；
drawImage（img，0,0）；
var width=file.naturalWidth；
var height=file.naturalHeight；
如果（（宽度>1024）和&（宽度>高度））
{
var new_width=1024；
var比率=新宽度/宽度；
var new_height=数学圆（高度*比率）；
}  
否则，如果（高度>768）
{
var新高度=768；
var比率=新高度/高度；
var new_width=数学圆（宽度*比率）；
}
其他的
{
var new_width=宽度；
var new_height=高度；
}
文件。写入（“新高度：“+新高度+”
）；
canvas.width=新宽度；
canvas.height=新高度；
var context=canvas.getContext（'2d'）；
drawImage（img，0,0，新宽度，新高度）；
//将画布另存为数据URL
dataurl=canvas.toDataURL（“图像/jpeg”，0.8）；
var fd=新的FormData（document.getElementById（formid））；
//将dataUrl转换为blob
var blobBin=atob（dataurl.split（'，）[1]）；
var数组=[]；
对于（var i=0；i4194304）
{
警报（“太大：+fsize+”比特\n重新调整大小或使用其他图像”）；
}否则
{
警报（“良好：+fsize+”比特\n键入：+ftype+”\n您可以在下面添加更多“+c+”）；
}
}否则{
警报（“请升级浏览器，\n无法处理文件！”）；
}
};

帮助我用PHP完成了它。@AymDev谢谢，AymDev。这是一个服务器端大小调整，类似于我的缩略图代码。如果在上传之前没有简单的调整大小的方法，我可能会使用这个解决方案，尽管这需要增加默认的2MB上传文件大小。您所要求的内容可以很容易地进行研究，并且有一些库可以帮助您避免重复，因为上面的文章1）没有将图像作为表单提交的一部分上传，2）使用Ajax上传。上面的一些想法在我的服务器端处理中效果很好，但是当我尝试修改客户端代码时，没有上传任何文件。到目前为止，唯一可用的解决方案是在表单外上传图像。帮助我用PHP完成它。@AymDev谢谢，AymDev。这是一个服务器端大小调整，类似于我的缩略图代码。如果在上传之前没有简单的调整大小的方法，我可能会使用这个解决方案，尽管这需要

 function resize(inputid,  inputname,  formid)
{
    //Check if File interface is supported
    if (window.File && window.FileReader && window.FileList && window.Blob)
    {
        var inpFiles = document.getElementById(inputid);
        var file = inpFiles.files[0];
        //var inpFiles = document.getElementById('i_file');
        //get the file size and file type from file input field
        var fsize = file.size;
        var ftype = file.type;
        var fname = file.name;
        var c = 3 - inputid.substr(1,1);
        if (c == 0) c = 'no';


        if (ftype.indexOf("jpeg") < 0 && ftype.indexOf("png") < 0)
              {
                  alert(ftype + " is not a valid image type!");
              } else if (fsize == 0)
                   {
                     alert("Invalid file size: " + fsize +" bites\nTry another image");
                   } else if
                       ((fsize > 1048576) && (fsize < 4194304)) //Resize if file size more than 1 mb (1048576) but less than 4 mb
                       {
                          alert("Resizing " + fsize +" bites\n of " + fname);
                           var dataurl = null;
                           // create <img> element
                           var img = document.createElement("img");
                           var reader = new FileReader();  
                           reader.onload = function(e) {
                            img.src = e.target.result;

                           // Once you have the image preview in an <img> element, you can draw this image in a <canvas> element to pre-process the file.

                            var canvas = document.createElement("mycanvas");
                            var context = canvas.getContext('2d'); 
                            context.drawImage(img, 0, 0);

                                  var width = file.naturalWidth;
                                  var height = file.naturalHeight;
                                  if ((width > 1024) && (width > height)) 
                                  {
                                    var new_width = 1024;
                                    var ratio = new_width / width;
                                    var new_height = Math.round(height * ratio);
                                    }  
                                    else if (height > 768)
                                     {
                                        var new_height = 768;
                                        var ratio = new_height / height;
                                        var new_width = Math.round(width * ratio);
                                     }
                                    else
                                    {
                                       var new_width = width;
                                       var new_height = height;
                                    }
                                    document.write("new_height: " + new_height + "<br />");
                                    canvas.width = new_width;
                                    canvas.height = new_height;
                                    var context = canvas.getContext('2d'); 
                                    context.drawImage(img,0,0,new_width, new_height);
                                    // save canvas as dataUrl
                                    dataurl = canvas.toDataURL("image/jpeg", 0.8);

                                    var fd = new FormData(document.getElementById(formid));
                                    // convert dataUrl into blob
                                    var blobBin = atob(dataurl.split(',')[1]);
                                    var array = [];
                                    for(var i = 0; i < blobBin.length; i++) {
                                    array.push(blobBin.charCodeAt(i));
                                    }
                                    var newfile = new Blob([new Uint8Array(array)], {type: 'image/jpeg', name: fname});

                                    fd.append(inputid, newfile); // blob file

                              } //onload

                              reader.readAsDataURL(file);


                       }else if (fsize > 4194304)
                             {
                               alert("Too big: " + fsize +" bites\nResize or use another image");
                              }else
                                  {
                                    alert("Good: " + fsize +" bites\nType: " + ftype +"\nYou can add " + c + " more below");
                                  }
    }else{
        alert("Please upgrade your browser ,\n cannot handle files!");
    }

};