图片压缩操作

最新推荐文章于 2023-01-07 14:02:44 发布

杨晓白

最新推荐文章于 2023-01-07 14:02:44 发布

阅读量114

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/weixin_43719925/article/details/115176739

版权

前端开发图片压缩 FileReader canvas base64

关键词由CSDN通过智能技术生成

js基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

前言
图片压缩操作
- 2. 2.js文件
总结

前言

What？前端还需要实现图片压缩？
@1 使用FileReader将选择的文件对象转换为base64

 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

@2 新建img，使其src指向base64
@3 新建canvas，将img画到canvas上

 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

@4 利用canvas.toDataURL将canvas导出为base64

 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

@5 将base64转化为File

 https://developer.mozilla.org/zh-CN/docs/Web/API/File/File

*/。

提示：以下是本篇文章正文内容，下面案例可供参考

图片压缩操作

1.html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从零打造Web前端开发高级工程师</title>
</head>

<body>
    <input type="file" id="fileInp">
    <br>
    <img src="" id="fileImg" alt="">

    <script src="2.js"></script>
</body>

</html>

2. 2.js文件

代码如下（示例）：

const file2base64 = function file2base64(file) {
    return new Promise(resolve => {
        let reader = new FileReader();
        reader.onload = ev => {
            resolve(ev.target.result);
        };
        reader.readAsDataURL(file);
    });
};

const createImg = function createImg(base64) {
    return new Promise(resolve => {
        let image = new Image;
        image.onload = () => {
            resolve(image);
        };
        image.src = base64;
    });
};

fileInp.onchange = async function () {
    let file = fileInp.files[0],
        base64,
        image,
        canvas,
        buffer;
    if (!file) return;
    console.log(`压缩前的文件大小:${file.size}`);

    base64 = await file2base64(file);
    image = await createImg(base64);
    canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
    // 压缩核心
    base64 = canvas.toDataURL('image/jpeg', 0.2);
   /*  // atob用来解码一个已经被base-64编码过的字符串。(参数string: 必需是一个通过 btoa() 方法编码的字符串) */
    buffer = atob(base64.split(',')[1]);
    file = new File([buffer], `${+new Date()}.jpg`, {
        type: 'image/jpeg'
    });

    fileImg.src = base64;
    console.log(`压缩后的文件大小:${file.size}`);
};

该处使用的url网络请求的数据。

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

杨晓白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片压缩操作

文章目录前言图片压缩操作2. 2.js文件总结前言/*What？前端还需要实现图片压缩？@1 使用FileReader将选择的文件对象转换为base64 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader@2 新建img，使其src指向base64@3 新建canvas，将img画到canvas上 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas
复制链接

扫一扫

专栏目录