js 压缩图片到指定大小|极客笔记

js 压缩图片到指定大小

在网页开发中，经常会遇到需要压缩图片的情况。图片占用的空间大，会导致网页加载速度变慢，影响用户体验。因此，压缩图片是一个非常重要的优化手段。在本文中，我们将介绍如何使用JavaScript来压缩图片到指定大小。

为什么需要压缩图片？

在网页开发中，使用大尺寸的图片可能会导致网页加载时间过长。尤其是对于移动端用户来说，加载速度越快，用户的体验越好。因此，将图片压缩到适当的大小是非常有必要的。

另外，一些网站和应用对上传的图片大小有限制，为了符合这些限制，我们需要将图片压缩到指定大小。

使用JavaScript压缩图片

在前端开发中，使用JavaScript对图片进行压缩是一个常见的做法。下面我们将介绍如何使用JavaScript来实现图片压缩。

1. HTML 文件

首先，我们需要在HTML文件中添加一个file input标签，用于用户上传图片。

<!DOCTYPE html>
<html>
<head>
    <title>图片压缩</title>
</head>
<body>
    <input type="file" id="fileInput" accept="image/*">
    <img id="imagePreview">
</body>
</html>

2. JavaScript 代码

接下来，我们编写JavaScript代码，实现对用户上传的图片进行压缩。

document.getElementById('fileInput').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
        var img = new Image();
        img.src = e.target.result;

        img.onload = function() {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            canvas.width = 200;
            canvas.height = 200;

            ctx.drawImage(img, 0, 0, 200, 200);

            var dataURL = canvas.toDataURL('image/jpeg', 0.7);

            document.getElementById('imagePreview').src = dataURL;
        }
    };

    reader.readAsDataURL(file);
});

在上面的代码中，我们使用了FileReader来读取用户上传的图片文件，然后将图片绘制到一个canvas上，并将canvas转换为base64格式的dataURL，最后将压缩后的图片显示在页面上。