js 压缩图片上传

Posted 2020-11-15 西瓜霜^_^

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 压缩图片上传相关的知识，希望对你有一定的参考价值。

感谢,参考了以下作者的绝大部分内容

https://blog.csdn.net/tangxiujiang/article/details/78755292

https://blog.csdn.net/u011415782/article/details/79978608

大概的流程就是

点击file选择图片

js将图片解读出base64编码,然后通过js将base64编码转为压缩后的base64

然后通过ajax或者form把压缩后的base64编码提交到服务器(php)

然后php将base64写入文件

html

<!-- 首先引入jquery!!!!!!这里没有引入 -->


<img src="/Uploads/verifyinfo/cardz.png" style="width: 100%;height: 100%;">
<input id="cardz" name="cardz" class="weui-uploader__input" type="file" accept="image/*" multiple="">
<input type="hidden" id="cardzbase" name="cardzbase">


<script>
  $(function(){
    $("input[type=file]").on(‘change‘, function(){

      var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
              fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
              fileObj = document.getElementById($(this).attr(‘id‘)).files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象

      var imgBase64str = ‘‘;      //存储图片的imgBase64
      // 检查是否是图片
      if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
        alert(‘上传错误,文件格式必须为：png/jpg/jpeg‘);
        return;
      }
      var that = this;
      // 调用函数，对图片进行压缩
      compress(fileObj,function(imgBase64){
        imgBase64str = imgBase64;//存储转换后的base64编码

        var reader  = new FileReader();
        var img = $(that).prev("img")
        file = that.files[0]
        reader.addEventListener("load", function () {
          img.attr("src",imgBase64str);
          $("#"+$(that).attr(‘id‘)+"base").val(imgBase64str);
        }, false);
        reader.readAsDataURL(file)
      });



    })
    $("#uploadcard").on("click", function(){
      var cardzbase = $("#cardzbase").val();
      if (cardzbase.length<=0) {
        $.toast("请添加正面照");
        return;
      }
      $.post(
        "php路径",
        {
          cardzbase:cardzbase
        },
        function (data) {
          alert(data.msg);
        }
      );


    });
  })
  // 对图片进行压缩
  function compress(fileObj, callback){
    if ( typeof (FileReader) === ‘undefined‘) {
      console.log("当前浏览器内核不支持base64图标压缩");
      //调用上传方式不压缩
      directTurnIntoBase64(fileObj,callback);
    } else {
      var reader = new FileReader();
      reader.onload = function (e) { //要先确保图片完整获取到，这是个异步事件


        var image = new Image();
        image.src=e.target.result;
        image.onload = function(){
          square = 0.2,   //定义画布的大小，也就是图片压缩之后的像素
                  canvas = document.createElement(‘canvas‘), //创建canvas元素
                  context = canvas.getContext(‘2d‘),
                  imageWidth = Math.round(square*image.width),    //压缩图片的大小
                  imageHeight = Math.round(square*image.height),
                  data = ‘‘;

          canvas.width = imageWidth;
          canvas.height = imageHeight;
          context.clearRect(0, 0, imageWidth, imageHeight);  //在给定矩形内清空一个矩形
          context.drawImage(this, 0, 0, imageWidth, imageHeight);
          var data = canvas.toDataURL(‘image/jpeg‘,0.6);
          //压缩完成执行回调

          callback(data);
        };
      };
      reader.readAsDataURL(fileObj);

    }
  }
  // 不对图片进行压缩，直接转成base64
  function directTurnIntoBase64(fileObj,callback){
    var r = new FileReader();
    // 转成base64
    r.onload = function(){
      //变成字符串
      imgBase64 = r.result;
      //console.log(imgBase64);
      callback(imgBase64);
    }
    r.readAsDataURL(fileObj);    //转成Base64格式
  }
</script>

php

<?php
/**
     * [将Base64图片转换为本地图片并保存]
     * @param $base64_image_content [要保存的Base64]
     * @param $path [要保存的路径]
     * @return bool|string
     */
    public function base64_image_content($base64_image_content,$path){
        //匹配出图片的格式
        if (preg_match(‘/^(data:s*image/(w+);base64,)/‘, $base64_image_content, $result)){
            $type = $result[2];
            //生成文件名
            $file_name = random_str(10).".{$type}";
            //路径和文件名拼接
            $local_file_url = $path.$file_name;
            if (file_put_contents($local_file_url, base64_decode(str_replace($result[1], ‘‘, $base64_image_content)))){
                return array("filename"=>$file_name,"path"=>$path,"filepath"=>$local_file_url);
            }else{
                return false;
            }
        }else{
            return false;
        }
    }

    public function uploadm()
    {
        $da[‘status‘] = 0;
        if (IS_POST) {
            $infoz = I("post.cardzbase");
            if (!$infoz || !$infof) {
                // 上传错误提示错误信息
//                $this->error($upload->getError());
                $da[‘msg‘] = "上传异常";
            } else {
                $infoz_info = $this->base64_image_content($infoz,"Uploads/verifyinfo/");
                if($infof_info==false){
                    $da[‘msg‘] = "上传失败";
                }else{
                    //自己的业务...
                }
            }
        }else{
            $da[‘msg‘] = "非法请求";
        }
        $this->ajaxReturn($da);
    }

以上是关于js 压缩图片上传的主要内容，如果未能解决你的问题，请参考以下文章

javaScript:压缩图片并上传

使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

前端图片压缩上传(纯js的质量压缩，非大小压缩)

前端图片压缩上传(纯js的质量压缩，非长宽压缩)

纯原生js移动端图片压缩上传插件

js图片压缩并上传？

js 压缩图片 上传

js 压缩图片上传