js上传图片压缩

2024年4月27日 122次阅读 来源: 赵飞燕

js实现图片压缩后上传

用到的技术:

  1. canvas相关api
  2. html5的一些api

兼容性:

h5没发现问题,pc低版本浏览器不支持

实现思路:

  • 监听文件域的上传,通过FileReader api获取到图片的原始数据
  • 计算压缩后的宽高,然后通过画到canvas上在截取出压缩后的数据
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file" id="file">
    <canvas id="canvas"></canvas>
</body>

</html>
<script>
    // 兼容性 h5上可以使用,pc低版本浏览器不支持
    // 准备要用到的img和canvas
    var img = new Image(),
        canvas;
    // 创建读取文件对象
    var render = new FileReader();
    // 如果不需要放在页面上,使用js创建该元素就可以了
    // canvas = document.createElement('canvas');

    // 找到canvas,准备画图
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var input = document.getElementById('file');
    input.addEventListener('change', function (e) {
        // 通过files获取到当前文件
        var file = e.target.files[0];
        // 如果选择的是图片
        if (file.type.indexOf('image') != -1) {
            // 读取file文件,得到的结果为base64位
            render.readAsDataURL(file);
        };
    });
    render.onload = function (result) {
        // 把读取到的base64图片设置给img的src属性
        var src = render.result;
        img.src = src;
    };
    img.onload = function () {
        // 加载完毕后获取图片的原始尺寸
        var origin_width = this.width;
        var origin_height = this.height;
        // 设置最大允许宽高,根据需求自己设置,值越大,图片大小越大
        var max_width = 400;
        var max_height = 400;

        // 最终宽高
        var target_width = origin_width;
        var target_height = origin_height;
        if (origin_width > max_width || origin_height > max_height) {
            if (origin_width / origin_height > max_width / max_height) {
                // 更宽，按照宽度限定尺寸
                target_width = max_width;
                target_height = Math.round(max_width * (origin_height / origin_width));
            } else {
                target_height = max_height;
                target_width = Math.round(max_height * (origin_width / origin_height));
            }
        }
        canvas.width = target_width;
        canvas.height = target_height;
        // 绘画到画布上
        context.drawImage(img, 0, 0, target_width, target_height);
        /*
            此处得到的是blob对象,blob对象是在ie10及以上才兼容,在ios8_1_1上和iphoneSE上有兼容问题
            canvas.toBlob(function(result) {
                console.log(result);
            });
        */
        // 读取canvas的数据
        var result = canvas.toDataURL();
        // 得到的结果是base64位的字符串,拿到压缩后的值通过网络请求交给后台处理...
        // 如果是blob对象,需要通过FormData对象发送
        console.log(result);
    };

</script>

以上参考了 张鑫旭的HTML5 file API加canvas实现图片前端JS压缩并上传

欢迎纠错(完)

    原文作者：赵飞燕
    原文地址: https://segmentfault.com/a/1190000015698959
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞