javascript实现移动端HTML5图片上传预览和压缩功能示例

// FileList 对象
var fs = document.getElementById("text").files
console.log(fs)
>>FileList
	0:File
		lastModified:1487309111498
		lastModifiedDate:Fri Feb 17 2017 13:25:11 GMT+0800 (中国标准时间)
		name:"1.png"
		size:22177
		type:"image/png"
		webkitRelativePath:""

var reader = new FileReader()

reader.readAsDataURL(fs);	// var fs = document.getElementById("text").files

reader.Onload= function (e) {
   console.log(e)
   console.log(this)
 }
 // this.result 是一个base64 格式的图片地址

/**
* @param	{Object}	f	input选择的图片	必填
* @param	{String}	quality		图片压缩的质量[0, 1]
* @param	{String}	output_img_type		输出图片的类型
*/
compress: function (f, quality, output_img_type) {
          var mime_type = "image/jpeg";
          if(output_img_type!=undefined && output_img_type=="image/png"){
            mime_type = "image/png";
          }
          createImageBitmap(f).then(function(imageBitmap) {
            var max = 1000; // 设置最大分辨率
            var c_w = '';
            var c_h = '';
            var width = imageBitmap.width;
            var height = imageBitmap.height;
            // 等比例缩放
            if (width > max || height > max) {
              if (width > height) {
                c_w = max;
                c_h = max * height / width;
              } else {
                c_h = max;
                c_w = max * width / height;
              }
            }else {   // 不缩放
              c_w = width;
              c_h = height;
            }

            var canvas = document.createElement('canvas');
            canvas.width = c_w;
            canvas.height = c_h;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(imageBitmap,0,0, width, height, 0, 0, c_w, c_h);
            canvas.toBlob(function(blob){
              images.push(blob);
            },mime_type, quality);
          });
        }

  
上传图片
  
    
  
  
原图预览
  
  
压缩后预览
  
  点击提交

 window.Onload= function () {
    var Upload = {
      change: function () {
        var oform = document.querySelector('form'),
          _this = this,
          res = //,
          oFiles = document.getElementById('upload_input').files;
        console.log(oFiles)
        for(var key in oFiles) {
          if(oFiles.hasOwnProperty(key)) {
            var f = oFiles[key];
            var type = f.type;
            if(type !== 'image/png' && type !== 'image/jpg' &&type !== 'image/jpeg' ) {
              alert("图片的格式必须为png或者jpg或者jpeg格式！");
              return;
            }
            var reader = new FileReader();
            reader.readAsDataURL(f);
            reader.Onload= function (e) {
              console.log(e)
              console.log(this)
              var img = document.getElementById('test');
              var img2 = document.getElementById('test2');
              img.src = this.result;

              var quality = .8;
              var compressImg = Upload.compress(img,quality);
              img2.src = compressImg
            }
          }
        }

      },
      change2: function() {
        var file_arr = file.files;
            var ul = $(".weui_uploader_files");
            if(file_arr.length <7) {
              for(var key in file_arr) {
                if(file_arr.hasOwnProperty(key)) {
                  var f = file_arr[key];
                  var url = URL.createObjectURL(f);
                  var reader = new FileReader();
                  reader.readAsDataURL(f);
                  n +=1;
                  if(n <7) {
                    reader._Onload= function(e) {

                      // 拼接显示预览图片的html
                      var list = $("
" +
                        "" +
                        "X
");
                      ul.append(list);
                      // 将转化后的图片地址放在img中
                      var pic = document.getElementById('preview' + n);
                      //pic.src = this.result;
                      pic.src=url;
                      console.log(reader);
                      images.push(f);
                      document.getElementById('delImg' + n).addEventListener("click", function () {
                        $(this).parent().remove();
                      });
                      return {
                        images:images
                      };
                    };
                    reader._onload();
                  }else {
                    $.alert("最多上传6张图片");
                  }
                }
              }
            }else {
              $.alert("最多上传6张图片");
            }
      },
      compress: function (source_img, quality, output_img_type) {
        var mime_type = "image/jpeg";
        if(output_img_type!=undefined && output_img_type=="image/png"){
          mime_type = "image/png";
        }
        var max = 1000; // 设置最大分辨率
        var c_w = '';
        var c_h = '';
        var width = source_img.width;
        var height = source_img.height;
        // 等比例缩放
        if (width > max || height > max) {
          if (width > height) {
            c_w = max;
            c_h = max * height / width;
          } else {
            c_h = max;
            c_w = max * width / height;
          }
        }else {   // 不缩放
          c_w = width;
          c_h = height;
        }
        var canvas = document.createElement('canvas');
        canvas.width = c_w;
        canvas.height = c_h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(source_img,0,0, width, height, 0, 0, c_w, c_h);

        var outputUrl = canvas.toDataURL(mime_type, quality);
        return outputUrl;
      },
      submit: function () {

      }

    };

    document.getElementById('upload_input').addEventListener('change',Upload.change);
  }