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

最新推荐文章于 2024-07-16 04:17:50 发布

星河_赵梓宇

最新推荐文章于 2024-07-16 04:17:50 发布

阅读量341

点赞数

文章标签： JavaScript

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

版权

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

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

（一）实现思路

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

（二）核心代码

//1.先通过input标签获取本地图片
<input id="file" type="file">

//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标签，用于展示压缩后的图片。

<body>
	<img id="img" src="">
	<input id="file" type="file">
</body>

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

<body>
	<img id="img" src="">
	<input id="file" type="file" onchange="compress()">
</body>
<script>
// 把图片转换成base64格式
function compress() { 
    let fileObj = document.getElementById('file').files[0] //图片文件对象
    let reader = new FileReader()
    reader.readAsDataURL(fileObj)
    reader.onload = function(e) {
    	console.log(e.target.result)    //这里的e.target.result就是转换后base64格式的图片文件
    }
}
</script>

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

<body>
	<img id="img" src="">
	<input id="file" type="file" onchange="compress()">
</body>
<script>

// 对图片进行压缩
function compress() { 
    let fileObj = document.getElementById('file').files[0] //上传文件的对象
    let reader = new FileReader()
    reader.readAsDataURL(fileObj)
    reader.onload = function(e) {
    
        let image = new Image()     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
        image.src = e.target.result    //让该标签加载base64格式的原图
        image.onload = function() {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
            let canvas = document.createElement('canvas'), //创建一个canvas元素
            context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
            imageWidth = image.width / 2,    //压缩后图片的宽度，这里设置为缩小一半
            imageHeight = image.height / 2,    //压缩后图片的高度，这里设置为缩小一半
            data = ''    //存储压缩后的图片
            canvas.width = imageWidth    //设置绘图的宽度
            canvas.height = imageHeight    //设置绘图的高度
            
            //使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            
            //使用toDataURL将canvas上的图片转换为base64格式
            data = canvas.toDataURL('image/jpeg')

            //将压缩后的图片显示到页面上的img标签
            document.getElementById('img').src = data
        }
    }
}
</script>

（四）完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>压缩图片demo</title>
</head>
<body>
	<img id="img" src="">
	<input id="file" type="file" onchange="compress()">
</body>
<script>

// 对图片进行压缩
function compress() { 
    let fileObj = document.getElementById('file').files[0] //上传文件的对象
    let reader = new FileReader()
    reader.readAsDataURL(fileObj)
    reader.onload = function(e) {
        let image = new Image() //新建一个img标签（还没嵌入DOM节点)
        image.src = e.target.result
        image.onload = function() {
            let canvas = document.createElement('canvas'), 
            context = canvas.getContext('2d'),
            imageWidth = image.width / 2,    //压缩后图片的大小
            imageHeight = image.height / 2,
            data = ''

            canvas.width = imageWidth
            canvas.height = imageHeight

            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            data = canvas.toDataURL('image/jpeg')

            //压缩完成 
            document.getElementById('img').src = data
        }
    }
}
</script>
</html>