利用canvas实现图片压缩的示例代码

项目中做身份证识别时，需要传送图片的 base64 格式编码，但是手机拍摄的照片都太大了，转成 base64 简直可怕，因此找了一下解决办法

涉及到的知识点

onchange 事件是在上传完文件之后触发使用 files 属性获取到上传的文件对象 readAsDataURL 用于转换成 base64 编码区分 canvas 的画布和绘画环境：画布：对应代码中的 CVS ，可以设置画布 width，h ei ght；绘画环境：对应代码中的 ctx ，可以设置 fillStyle，fillRect 等；使用 canvas 自带的 drawImage() 方法将图片画到 canvas 上想取到压缩后图片的 base64 可以使用 canvas 自带的 toDataURL() 方法

完整代码

<!DOCTY PE  ht ML >
<html lang="en">

<head>
    < ;m eta charset="UTF-8">
    <meta n am e="viewport" content="width=device-width, in IT ial -s cale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie= Edge ">
    <title>Document</title>
</head>

<body>
    <input type="file" onchange="load img (this)">
    < hr >
    <div>800×449，544KB</div>
    <img src="" alt="">
    <hr>
    <div>400×224，157KB</div>
    <canvas></canvas>

    <script>
        //  上传图片
        function loadImg(me) {
            let img = document.querySelector('img');
            let cvs = document.querySelector('canvas');
            let file = me.files[0];    //  获取到文件对象
            //  上传的图片大于 500KB 时才压缩
            if (file  &&  (file.size / 1024 > 500)) {
                let reader = new FileReader();
                reader.readAsDataURL(file);     //  转成 base64 编码
                reader.onload = function (e) {
                    let naturalBase64 = e.t arg et.result;    //  获取 base64 编码，这是原图的
                    img.src = naturalBase64;
                    img.onload = function () {
                        let ratio = img.naturalWidth / img.naturalHeight; //  获取原图比例,为了等比压缩
                        cvs.width = 400;
                        cvs.height = cvs.width / ratio;
                        let ctx = cvs.getContext('2d');
                        ctx.drawImage(img, 0, 0, cvs.width, cvs.height);    //  画在 canvas 上
                        // 压缩后新图的 base64
                        let zipBase64 = cvs.toDataURL();
                    }
                }
            }
        }
    </script>
</body>

</html>

效果图

关于压缩后的图片大小

这里提供一个开箱即用的方法，baseStr 是一个完整的 Base64 编码，就是包括

base64

代码：

function calcBase(baseStr){
     VAR  tag = 'base64,';
    baseStr = baseStr.s ub string(baseStr.indexOf(tag)+tag.length);
    var eqTa gin dex = baseStr.indexOf('=');
    baseStr = eqTagIndex!=-1?baseStr.substring(0,eqTagIndex):baseStr;
    var  strlen  = baseStr.length;
    var fileSize = strLen - (strLen / 8) * 2;
    console. LOG ("文件大小:" + (fileSize / 1024).toFixed(1) + 'KB');
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是为你收集整理的利用canvas实现图片压缩的示例代码全部内容，希望文章能够帮你解决利用canvas实现图片压缩的示例代码所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于利用canvas实现图片压缩的示例代码的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did205722

更新时间：2023-05-03 阅读：21次