图片上传前压缩，base64图片压缩

<!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>
    <div>
        <img src="imgzip.jpg" alt="" width="350">
        <img alt="" id="transform">
    </div>
    <script>
        /**
 * 图片压缩，默认同比例压缩
 * @param {Object} path 
 *   pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 *   obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 *   回调函数有一个参数，base64的字符串数据
    quality 图片缩放比例0-1 越大越清晰
 */
        // 调用函数处理图片 　　　　　　　　　　　　　　　　
        dealImage("imgzip.jpeg", {
            // 注意：在pc端可以用绝对路径或相对路径，移动端最好用绝对路径
            // width: 1000,
            quality: 0.5
        }, function (base) {
            document.getElementById("transform").src = base;
            var mb = showSize(base);
        })
        function showSize(base64url) {
            //获取base64图片大小，返回字节
            var str = base64url.replace('data:image/png;base64,', '');
            var equalIndex = str.indexOf('=');
            if (str.indexOf('=') > 0) {
                str = str.substring(0, equalIndex);
            }
            var strLength = str.length;
            var fileLength = parseInt(strLength - (strLength / 8) * 2);
            console.log("压缩后的图片size", fileLength + "B")
            return fileLength;
        }

        function dealImage(path, obj, callback) {
            var img = new Image();
            img.src = path;
            img.onload = function () {
                var that = this;
                var ext = path.substring(path.lastIndexOf(".") + 1).toLowerCase();
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = obj.quality;  // 默认图片质量为0.7,可以为image/jpeg或image/webp类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                    quality = obj.quality;
                }
                // quality值越小，所绘制出的图像越模糊
                console.log("tup", ext)
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
        }
    </script>
</body>

</html>
图片上传前 压缩，base64图片压缩

猜你喜欢

图片上传前压缩，base64图片压缩
