前端代码进行图像压缩

<!--
    //基本思想 将图片尺寸等比压缩到最大高度，然后画到画布上，将画布转为图片
-->
<script>
    var maxHeight = 1024;
    var maxWidth = 1024;
    //获取到上传文件的元素
    var el = document.getElementById("file");
    el.addEventListener('change', function(event) {
        var file = event.target.files[0];
        var size = file.size;
        console.log('origin size:', size)
        minPicture(file, maxHeight, maxWidth)
        .then( (fileBlob) => {
            //获取到blob就可以做想做的事情了，比如转为URL
            console.log(fileBlob);
        })
    })

    function minPicture(file, maxHeight, maxWidth) {
        var canvas = document.createElement("canvas");
        var reader = new FileReader();
        var img = new Image();
        var ctx = canvas.getContext('2d');
        return new Promise((resolve, reject) => {
            img.addEventListener('error', reject);
            img.addEventListener('load', function () {
                var height = img.height;
                var width = img.width;
                //计算一个合适的压缩比例，
                //如果高度超过规定的，通过高度进行等比压缩
                //如果宽度超过规定的，通过宽度压缩
                //如果高度、宽度都超过，则使用需要压缩比例大的数字作为压缩比例
                let rate = 1;
                if (maxWidth && width > maxWidth) {
                    rate = width / maxWidth;
                }
                if (maxHeight && height > maxHeight) {
                    let rate2 = height / maxHeight;
                    if (rate2 > rate) {
                        rate = rate2;
                    }
                }
                //更新压缩后的高度宽度
                height = height / rate;
                width = width / rate;
                img.height = height;
                img.width = width;
                canvas.height = height;
                canvas.width = width;
                //清楚画布内容
                cxt.clearRect(0, 0, width, height);
                //绘制图像到画布
                cxt.drawImage(img, 0, 0, width, height);
                //图像转为Blob,也可以转为url
                canvas.toBlob(resolve);
            });

            reader.addEventListener('error', reject);
            reader.addEventListener('load', function () {
                img.src = reader.result;
            });
            reader.readAsDataURL(file);
        })
    }
</script>
</html>
前端代码进行图像压缩

猜你喜欢
