压缩图片_牛客博客

主要压缩图片的方法

    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 / 5, //压缩后图片的大小
                    imageHeight = image.height / 5,
                    data = ''

                canvas.width = imageWidth
                canvas.height = imageHeight

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

                //压缩完成 
                document.getElementById('img').src = data
                console.log(getImgSize(data))
            }
        }
    }

压缩后看图片的大小

    function getImgSize(str) {
        //获取base64图片大小，返回KB数字
        var str = str.replace('data:image/jpeg;base64,', ''); //这里根据自己上传图片的格式进行相应修改
        var strLength = str.length;
        var fileLength = parseInt(strLength - (strLength / 8) * 2);
        // 由字节转换为KB
        var size = "";
        size = (fileLength / 1024).toFixed(2);
        return parseInt(size);
    }

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>压缩图片demo</title>
    <style>
        img{
            width: 300px;
            height: 300px;
        }
    </style>
</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 / 5, //压缩后图片的大小
                    imageHeight = image.height / 5,
                    data = ''

                canvas.width = imageWidth
                canvas.height = imageHeight

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

                //压缩完成 
                document.getElementById('img').src = data
                console.log(getImgSize(data))
            }
        }
    }

    function getImgSize(str) {
        //获取base64图片大小，返回KB数字
        var str = str.replace('data:image/jpeg;base64,', ''); //这里根据自己上传图片的格式进行相应修改
        var strLength = str.length;
        var fileLength = parseInt(strLength - (strLength / 8) * 2);
        // 由字节转换为KB
        var size = "";
        size = (fileLength / 1024).toFixed(2);
        return parseInt(size);
    }
</script>

</html>