zoukankan      html  css  js  c++  java
  • js压缩图片的方法(手机端,兼容ios和android),返回值为base64的字符串,压缩率ratio可自定义

    方法的定义:

    getCompressBase64(img, ratio){//img为通过"document.getElementByTagName('input[type=file]')[0]"拿到的图片blog对象, 压缩率ratio范围为0-1

      if(Object.prototype.toString.call(img) === '[object HTMLInputElement]'){
        let phone = navigator.userAgent.indexOf('iPhone')//获取是否是iphone
        let reader = new FileReader()
        reader.readAsDataURL(img.files[0])
        let tempPromise = new Promise((resolve,reject)=>{
          reader.onload = function(e){
          image = new Image()
          image.src = e.target.result
          image.onload = function () {
            var that = this
            // 默认按比例压缩
            w = that.width
            h = that.height
            scale = w / h
            canvas = document.createElement('canvas')
            if(phone > -1){
              canvas.width = h
              canvas.height = w
              ctx = canvas.getContext('2d')
              ctx.save();
              ctx.translate(h/2,w/2);
              ctx.rotate(90*Math.PI/180)
              ctx.drawImage(image, 0 - w/2, 0 - h/2, w, h)
              ctx.restore()
            }else{
              canvas.width = w
              canvas.height = h
              ctx = canvas.getContext('2d')
              ctx.drawImage(image, 0, 0, w, h)
            }
            img64 = canvas.toDataURL('image/jpeg', ratio)
            resolve(img64)
          }
        }
      })
      return tempPromise//返回一个promise

    }

    方法的使用:

    let img = document.getElementByTagName('input[type=file]')[0]//拿到页面中的某个图片
    let file = img.files[0]
    // 首先读取此图片,读取完毕之后进行压缩
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function () {//
      getCompressBase64(img, 0.01).then(data => {
        console.log(data)//data就是压缩后的base64格式的字符串
      })
    }
  • 相关阅读:
    自动同步日期dos命令 | DOS命令自动同步时间
    Mysql字符串截取,去掉时间,匹配日期等于今日
    HTML指定页面编码
    Mysql连接字符,字段函数concat()
    功能强大的截图工具snipaste
    当页面提交时,执行相关JS函数检查输入是否合法
    DOM和BOM
    JS内建對象(Math,Number,String,Date)
    JS数组基础01(数组的创建,push,pop,unshift,shift,concat,join,splice,slice,sort.reverse,indexOf,三种排序)
    总结01(对象引用的赋值与对象的复制,函数作为对象及回调递归,区分数组与对象)
  • 原文地址:https://www.cnblogs.com/xuanbingbingo/p/8607969.html
Copyright © 2011-2022 走看看