zoukankan      html  css  js  c++  java
  • js压缩上传图片

    初学有不当之处,请多多指点,

    <body>
      <div class="cc">
        <input type="file" id="file" onchange="imgChange()" accept="image/*">
      </div>
      <img src="" id="showImage" alt="">
    <!-- <canvas id="canvas" style="display: none;"></canvas> -->


    <script>
      function imgChange(){
        var file = document.getElementById('file').files[0] //获取选择上传的图片文件

        var reader = new FileReader() //声明一个新构的FileReader
        reader.readAsDataURL(file) //把图片变成base64
        reader.onload = function(){

          var showImage = document.getElementById('showImage')

          if (file.size > 100 * 100) { //判断图片的大小
            showImage.src = reader.result //赋值给img选择的图片
            showImage.onload = function(){ //当img全部加载完后
              var canvas = document.createElement('canvas')//创建canvas对象
              canvas.width = this.width //设置画布的宽高和showImage图片的大小一致
              canvas.height = this.height
              var cgt = canvas.getContext('2d') //设置二维画布环境
              cgt.drawImage(this,0,0,canvas.width,canvas.height)

              showImage.src = canvas.toDataURL("image/jpeg", 0.4) //改变画布的格式和图片质量
            }
        }
        else{
          showImage.src = reader.result
        }
      }

    }
    </script>
    </body>

    最后是把画布重新描绘出的base64路径赋值给img标签的src属性

    之所以压缩是在重新描绘画布的过程中,把图片实质的宽高和质量做了改变(而不是单纯标签的的宽高,是图片本身真是的宽高,不知道你们会不会和我一样有这样的误解过!!!)

  • 相关阅读:
    windows系统往远程桌面上共享文件(某磁盘下文件)如何远程连接传输文件。
    小程序实现读数据、统计词频、建词典
    pickle模块以特殊的二进制格式保存和恢复数据对象
    用一个简单小程序谈import和from...import的区别
    windows系统(64bit)安装python、pytorch
    SQL Server 一个简单的游标
    SQL server高级语法
    SQL server基本语法
    SSIS SQL Server配置自动作业
    Power BI 入门资料
  • 原文地址:https://www.cnblogs.com/mei1234/p/8465633.html
Copyright © 2011-2022 走看看