博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js压缩图片的方法(手机端,兼容ios和android),返回值为base64的字符串,压缩率ratio可自定义...
阅读量:6548 次
发布时间:2019-06-24

本文共 1644 字,大约阅读时间需要 5 分钟。

方法的定义:

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格式的字符串
  })
}

转载于:https://www.cnblogs.com/xuanbingbingo/p/8607969.html

你可能感兴趣的文章
Ubuntu 11.04下安装Eclipse
查看>>
软件项目管理中的十个误区-转载自CSDN
查看>>
git的一些地址
查看>>
java四舍五入(保留两位小数)
查看>>
京东云引擎:免费好用的web应用托管平台
查看>>
Linux下php安装openSSL模块
查看>>
如何删除mysql数据库的日志文件
查看>>
Swift/OC计时器使用方法
查看>>
AD的备份与还原
查看>>
我的友情链接
查看>>
和第三代动词算子式代码生成器光配合的前后端分离示例代码
查看>>
502 Bad Gateway 错误的解决办法
查看>>
StringIO和cStringIO模块
查看>>
微信开发
查看>>
get语句
查看>>
JSP的6种基本动作介绍
查看>>
基于xterm.js的webssh实现
查看>>
rspec的一些基本
查看>>
convirt(二)—— 创建第一台虚机
查看>>
足球——2011-2012意甲球队队标
查看>>