js 图片压缩

- 日理万妓 2021-12-14 15:34 373阅读 0赞

实现原理：把图片用canvas画出来再转成二进制数据，转二进制的时候做压缩，然后再上传

> 目前浏览器不支持 canvas.toBlob,需要先转成base64，再转成 blob

<!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>图片压缩</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            img {
                width: 200px;
            }
        </style>
    </head>
    
    <body>
        <input type="file" id='imgInput'>
        [外链图片转存失败(img-5KW7Jy6w-1562144231384)(https://mp.csdn.net/mdeditor)]
        <script src="./node_modules/ali-oss/dist/aliyun-oss-sdk.min.js"></script>
        <script>
            let fileInput = document.querySelector('#imgInput')
            fileInput.onchange = function (ev) {
                let file = ev.target.files[0]
                let size = file.size / (1000) / 1000
                    canvasPress(file, function (blob) {
                        up2oss({
                            file: blob
                        }, function (res) {
                            console.log(res, 23)
                        })
                    })
                }
            function dataURLtoBlob(dataurl) {
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            }
            function canvasPress(file, cb, type = "image/jpeg", wLimit = 2000) {
                var img = new Image();
                img.src = window.URL.createObjectURL(file);
                var imgWidth, imgHeight;
                img.onload = function () {
                    imgWidth = img.width;
                    imgHeight = img.height;
                    let ctxW, ctxH;
                    if (imgWidth > imgHeight && imgWidth > wLimit) {
                        ctxW = wLimit;
                        ctxH = wLimit * imgHeight / imgWidth
                    } else if (imgHeight > imgWidth && imgHeight > wLimit) {
                        ctxH = wLimit;
                        ctxW = wLimit * imgWidth / imgHeight
                    } else {
                        ctxW = imgWidth
                        ctxH = imgHeight
                    }
                    var canvas = document.createElement("canvas");
                    canvas.width = ctxW
                    canvas.height = ctxH
                    var ctx = canvas.getContext("2d");
                    ctx.clearRect(0, 0, ctxW, ctxH);
                    ctx.drawImage(img, 0, 0, ctxW, ctxH);
                    let base64 = canvas.toDataURL(type, .9);
                    cb(dataURLtoBlob(base64))
                }
            }
        </script>
    </body>
    
    </html>