Canvas 压缩图片

摘要:包括base64 与文件流之间的转化

HTML Demo

<!DOCTYPE html>
<html>
<head>
    <title>Oceania Canvas</title>
</head>
<body>
    <form class="layui-form" id="authorization-upload" action="index.php"  enctype="multipart/form-data" >
        <input type="file" id="fileImg" class="fileImg"/>
     <div class="layui-form-item layui-inline">
          <div class="layui-inline">
               <button type="button"></button>
         </div>
     </div>    
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    // 图片文件上传获取url
$("#fileImg").on('change',function(){
   pressImg({
     file:this.files[0],
     targetSize:2 * 1024 * 1024,
     // targetSize:100,
     quality:0.5,
     // width:600,
     succ:function(resultFile){
         //如果不是null就是压缩成功
         if(resultFile){
           //TODO
           console.log(resultFile);
           // $('#authorization-upload').submit();
           // return;
            var formdata = new FormData();
            formdata.append("file",resultFile);
            $.ajax({
                type: "POST", // 数据提交类型
                url: "index.php", // 发送地址
                data: formdata, //发送数据
                async: true, // 是否异步
                processData: false, //processData 默认为false,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
                contentType: false,
                success: function(v){
                console.log(v);
              }//
            });
        }
     }
  })
});

/**
* canvas压缩图片
* @param {参数obj} param 
* @param {文件二进制流} param.file 必传
* @param {目标压缩大小} param.targetSize 不传初始赋值-1
* @param {输出图片宽度} param.width 不传初始赋值-1,等比缩放不用传高度
* @param {输出图片名称} param.fileName 不传初始赋值image
* @param {压缩图片程度} param.quality 不传初始赋值0.92。值范围0~1
* @param {回调函数} param.succ 必传
*/
function pressImg(param){
  //如果没有回调函数就不执行
  if(param && param.succ){
     //如果file没定义返回null
     if(param.file == undefined) return param.succ(null);
     //给参数附初始值
     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;
     // 得到文件类型
     var fileType = param.file.type;
     // console.log(fileType) //image/jpeg
     if(fileType.indexOf("image") == -1){
       console.log('请选择图片文件^_^');
       return param.succ(null);
     }
     //如果当前size比目标size小,直接输出
     console.log(param.file.size);
     console.log(param.targetSize);
     var size = param.file.size;
     if(param.targetSize > size){
       return param.succ(param.file);
     }
     // 读取file文件,得到的结果为base64位
     changeFileToBaseURL(param.file,function(base64){
       if(base64){
         var image = new Image();
         image.src = base64;
         image.onload = function(){
           // 获得长宽比例
           var scale = this.width / this.height;
           // console.log(scale);
           //创建一个canvas
           var canvas = document.createElement('canvas');
           //获取上下文
           var context = canvas.getContext('2d');
           //获取压缩后的图片宽度,如果width为-1,默认原图宽度
           canvas.width = param.width == -1 ? this.width : param.width;
           //获取压缩后的图片高度,如果width为-1,默认原图高度
           canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale);
           //把图片绘制到canvas上面
           context.drawImage(image, 0, 0, canvas.width, canvas.height);
           //压缩图片,获取到新的base64Url
           // var newImageData = canvas.toDataURL(fileType,param.quality);
           var newImageData = canvas.toDataURL('image/jpeg',param.quality);
           // console.log(newImageData);
           //将base64转化成文件流
           var resultFile = dataURLtoFile(newImageData,param.fileName);
           //判断如果targetSize有限制且压缩后的图片大小比目标大小大,就弹出错误
           // if(param.targetSize != -1 && param.targetSize < resultFile.size){
           //   console.log("Image upload size is too large, please upload again^_^");
           //   param.succ(null);
           // }else{
           //   //返回文件流
           //   param.succ(resultFile);
           // }
           param.succ(resultFile);
         }
       }
     });
   }
 }

/**
* @param {二进制文件流} file 
* @param {回调函数,返回base64} fn 
*/
function changeFileToBaseURL(file,fn){
  // 创建读取文件对象
      var fileReader = new FileReader();
      //如果file没定义返回null
      if(file == undefined) return fn(null);
      // 读取file文件,得到的结果为base64位
      fileReader.readAsDataURL(file);
      fileReader.onload = function(){
        // 把读取到的base64
        var imgBase64Data = this.result;
        fn(imgBase64Data);
      }
}


/**
 * 将base64转换为文件
 * @param {baseURL} dataurl 
 * @param {文件名称} filename 
 * @return {文件二进制流}
*/
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});
 }

</script>
</body>
</html>

PHP Demo

<?php

var_dump($_FILES);
评论