input file 上传图片及压缩

<input    id="shangchuanimg" title=""   type="file" name="file" value="" onChange="showImage(this)" />
<ul class="ul"> 上传之后的图片矩阵 </div>

压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层 ，将canvas等比例缩放，然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可

function showImage(file, id) {
  if (file.files && file.files[0]) {
    for (let i = 0; i < file.files.length; i++) {
      console.log(file.files[i]) //拿到file对象
      let reader = new FileReader(); //读取file
      reader.readAsDataURL(file.files[i]);
      reader.onloadend = function(e) {
        let image = new Image() //新建一个img标签（还没嵌入DOM节点)
        image.src = e.target.result //将图片的路径设成file路径
        image.onload = function() { 
        //压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层 ，将canvas等比例缩放，然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可
            let canvas = document.createElement('canvas'), 
            context = canvas.getContext('2d'),
            imageWidth = image.width / 10,    //压缩后图片的大小
            imageHeight = image.height / 10,
            data = ''
            canvas.width = imageWidth
            canvas.height = imageHeight

            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            data = canvas.toDataURL('image/jpeg')
            console.log(dataURLtoFile(data,'a'+imgnum))
            //压缩完成 
        
            var newfile = dataURLtoFile(data,'a'+imgnum+'.png');
          	var formFile = new FormData();
          	formFile.append('files', newfile );
         	//ajax()....ajax上传file
        }
			//上传之后预览小图
        $('.pz').before('<li class="fileimg isfile dis" num=' + first + '>' +
          '<img src=' + reader.result + ' alt="">' +
          '<span class="isclick"></span>' +
          '</li>')
        $('.ok').text('上传(' + imgnum + ')')
      }
    }
  }
}

function dataURLtoFile(dataurl, filename) { // base64转file对象
       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});
   }