キャンバスを使用して画像サイズを圧縮する例

/**
* @param {binary file stream} file 
* @param {callback function that returns base64} fn 
*/
function changeFileToBaseURL(file,fn){
  // Create a read file object
      var fileReader = new FileReader();
      // return null if file is not defined
      if(file == undefined) return fn(null);
      // Read the file, the result is base64 bit
      fileReader.readAsDataURL(file);
      fileReader.onload = function(){
        // read the base64
        var imgBase64Data = this.result;
        fn(imgBase64Data);
      }
    }

/**
 * Convert base64 to file
 * @param {baseURL} dataurl 
 * @param {file name} filename 
 * @return {file binary stream}
*/
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(. *?) ;/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
 }

/**
* canvas compressed image
* @param {parameter obj} param 
* @param {file binary stream} param.file must be passed
* @param {target compression size} param.targetSize not passed initial assignment -1
* @param {output image width} param.width don't pass initial assignment -1, isometric scaling don't pass height
* @param {output image name} param.fileName don't pass the initial assignment image
* @param {compressed image degree} param.quality don't pass initial assignment 0.92. value range 0~1
* @param {callback function} param.succ must be passed
*/
function pressImg(param){
  // if there is no callback function, do not execute
  if(param && param.succ){
     //return null if file is not defined
     if(param.file == undefined) return param.succ(null);
     //append initial values to the parameters
     param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1;
     param.width = param.hasOwnProperty("width") ? param.width : -1;
     param.fileName = param.hasOwnProperty("fileName") ? param.fileName: "image";
     param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92;
     var _this = this;
     // Get the file type
     var fileType = param.file.type;
     // console.log(fileType) // image/jpeg
     if(fileType.indexOf("image") == -1){
       console.log('Please select the image file ^_^');
       return param.succ(null);
     }
     // If the current size is smaller than the target size, output directly
     var size = param.file.size;
     if(param.targetSize > size){
       return param.succ(param.file);
     }
     // read the file, the result is base64 bit
     changeFileToBaseURL(param.file,function(base64){
       if(base64){
         var image = new Image();
         image.src = base64;
         image.onload = function(){
           // Get the aspect ratio
           var scale = this.width / this.height;
           // console.log(scale);
           // Create a canvas
           var canvas = document.createElement('canvas');
           // Get the context
           var context = canvas.getContext('2d');
           //get the width of the compressed image, if width is -1, default original image width
           canvas.width = param.width == -1 ? this.width : param.width;
           //get the height of the compressed image, if width is -1, the original height will be the default
           canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale);
           // Draw the image on top of the canvas
           context.drawImage(image, 0, 0, canvas.width, canvas.height);
           //compress the image and get the new base64Url
           var newImageData = canvas.toDataURL(fileType,param.quality);
           //convert base64 to a file stream
           var resultFile = dataURLtoFile(newImageData,param.fileName);
           //judge if targetSize has a limit and the compressed image size is larger than the target size, then pop up an error
           if(param.targetSize ! = -1 && param.targetSize < resultFile.size){
             console.log("Image upload size is too large, please re-upload ^_^");
             param.succ(null);
           }else{
             //return the file stream
             param.succ(resultFile);
           }
         }
       }
     });
   }
 }

<input type="file" id="fileImg" class="fileImg"/>

// Image file upload get url
$("#fileImg").on('change',function(){
   pressImg({
     file:this.files[0],
     targetSize:2 * 1024 * 1024,
     quality:0.5,
     width:600,
     succ:function(resultFile){
         //if not null, compression is successful
         if(resultFile){
           //TODO
        }
     }
  })
});