十分钟教会你原生JS压缩图片，极其精简版

原文链接： https://blog.csdn.net/yasha97/article/details/83629510

十分钟教会你原生JS压缩图片，极其精简版

 

原文链接：https://blog.csdn.net/yasha97/article/details/83629510

 

（一）实现思路

1. 先通过input标签获取本地图片
2. 把获取到的图片转换成base64格式
3. 使用canvas中的API把图片分辨率调低（canvas只能处理base64格式的图片）
   注：不懂base64的同学可以花5分钟看看这个《用FileReader对象把图片转换成base64格式》

 

（二）核心代码

//1.先通过input标签获取本地图片


//2.把获取到的图片转换成base64格式（以下代码为固定搭配）
let fileObj = document.getElementById('file').files[0]  //获取文件对象
let reader = new FileReader()   //新建一个FileReader对象
reader.readAsDataURL(fileObj)   //将读取的文件转换成base64格式
reader.onload = function(e) {
    console.log(e.target.result)    //转换后的文件数据存储在e.target.result中
}

//3.在canvas中把图片分辨率调低
context.drawImage(image, 0, 0, imageWidth, imageHeight)

 

（三）步骤详解

 

• 我们先在HTML中添加一个input标签，用于获取本地图片文件，并且写一个img标签，用于展示压缩后的图片。

 

• 给input标签添加一个onchange监听，只要获取到了本地图片，就执行compress( )方法。compress( )将获取到的图片文件转换成base64格式（固定搭配，我们只需要在onload方法中执行自己的操作就行了）。此时代码如下

 

• 上面的步骤已经获取到了转换后的base64格式图片，我们接下来就要通过canvas来对base64格式的图片进行压缩了。记住，base64转换代码是固定搭配，我们的操作只要添加到onload方法里面即可。此时代码如下

（四）完整代码