侧边栏壁纸
博主头像
suringYu

走走停停

  • 累计撰写 35 篇文章
  • 累计创建 11 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

前端上传图并压缩 js实现

suringYu
2021-05-24 / 0 评论 / 0 点赞 / 177 阅读 / 7,766 字

思路: 先通过input 标签上传图片,用FileReader对象来加载文件,new一个image对象,用来获取原来的宽和高,图片大小超过限定的访问后进行压缩。再将image对象以想要的高宽画到canvas上,最后用canvas.toDataURL()方法获取压缩后的图片base64。
重点:canvas

核心代码

	    // 压缩图片并返回base64
            function getBase64(fileDocument) {
                // 新增遮罩
                var loadIndex = layer.load(1, {
                    shade: [0.6, '#fff'], //0.6透明度的白色背景
                    offset: ['40%'],
                    time: 10 * 1000,
                });
                var file = fileDocument.files[0];
                var fileName = fileDocument.value;
                // 配置参数
                var sizeList = [1,0.8,0.7];
                var typeList = [".jpg",".png",".jpeg"];
                var afterType = "image/jpeg";
                return new Promise((resolve, reject) => {
                    try {
                        //静默处理
                        if (fileName == null) {
                            fileName = "";
                            layer.close(loadIndex);
                            resolve("error");
                        }
                        var seat = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
                        var typeCheck = false;
                        typeList.forEach(e => {
                            if (e == seat) {
                                typeCheck = true;
                            }
                        });
                        if (!typeCheck) {
                            layer.close(loadIndex);
                            layer.msg("只能上传图片文件!");
                            fileName = "";
                            resolve("error");
                        }
                        var size;
                        var fileSize = Math.round(file.size / (1024 * 1024));
                        if (fileSize < 2) {
                            size = sizeList[0];
                        } else if (fileSize >= 2 && fileSize < 5) {
                            size = sizeList[1];
                        } else if (fileSize >= 5 && fileSize < 10) {
                            size = sizeList[2];
                        } else {
                            layer.msg("图片大小超过10M!上传失败!");
                            // 清空所选择文件路径
                            fileName = "";
                            resolve("error");
                        }
                        var img = new Image();
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            // 文件加载成功后去转成Img对象,为了拿到图片的原始宽高
                            img.src = e.target.result;
                            img.onload = function () {
                                // 创建画布canvas
                                let canvas = document.createElement('canvas');
                                let content = canvas.getContext('2d');

                                // 设置画布的宽高
                                canvas.width = img.width * size; // 需要压缩到的图片宽度
                                canvas.height = img.height * size;

                                // 将图片画在画布上
                                content.drawImage(img, 0, 0, canvas.width, canvas.height);
                                // console.log(canvas.toDataURL('image/jpeg', 0.92));
                                layer.close(loadIndex);
                                resolve(canvas.toDataURL(afterType, 0.92));
                            }
                        };
                        reader.readAsDataURL(file);
                        //转 失败
                        reader.onerror = function (error) {
                            layer.close(loadIndex);
                            reject(error);
                        };
                    } catch (e) {
                        // ignore
                    }
                });
            };

全部代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.4.0/layer.js"></script>
    <title>Document</title>
</head>

<body>
    <input id="uploadBack" type="file" />
    <button id="upLoad">提交</button>
    <div id="images">
    </div>
    <script>
        $(function () {
            // 压缩图片并返回base64
            function getBase64(fileDocument) {
                // 新增遮罩
                var loadIndex = layer.load(1, {
                    shade: [0.6, '#fff'], //0.6透明度的白色背景
                    offset: ['40%'],
                    time: 10 * 1000,
                });
                var file = fileDocument.files[0];
                var fileName = fileDocument.value;
                // 配置参数
                var sizeList = [1,0.8,0.7];
                var typeList = [".jpg",".png",".jpeg"];
                var afterType = "image/jpeg";
                return new Promise((resolve, reject) => {
                    try {
                        //静默处理
                        if (fileName == null) {
                            fileName = "";
                            layer.close(loadIndex);
                            resolve("error");
                        }
                        var seat = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
                        var typeCheck = false;
                        typeList.forEach(e => {
                            if (e == seat) {
                                typeCheck = true;
                            }
                        });
                        if (!typeCheck) {
                            layer.close(loadIndex);
                            layer.msg("只能上传图片文件!");
                            fileName = "";
                            resolve("error");
                        }
                        var size;
                        var fileSize = Math.round(file.size / (1024 * 1024));
                        if (fileSize < 2) {
                            size = sizeList[0];
                        } else if (fileSize >= 2 && fileSize < 5) {
                            size = sizeList[1];
                        } else if (fileSize >= 5 && fileSize < 10) {
                            size = sizeList[2];
                        } else {
                            layer.msg("图片大小超过10M!上传失败!");
                            // 清空所选择文件路径
                            fileName = "";
                            resolve("error");
                        }
                        var img = new Image();
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            // 文件加载成功后去转成Img对象,为了拿到图片的原始宽高
                            img.src = e.target.result;
                            img.onload = function () {
                                // 创建画布canvas
                                let canvas = document.createElement('canvas');
                                let content = canvas.getContext('2d');

                                // 设置画布的宽高
                                canvas.width = img.width * size; // 需要压缩到的图片宽度
                                canvas.height = img.height * size;

                                // 将图片画在画布上
                                content.drawImage(img, 0, 0, canvas.width, canvas.height);
                                // console.log(canvas.toDataURL('image/jpeg', 0.92));
                                layer.close(loadIndex);
                                resolve(canvas.toDataURL(afterType, 0.92));
                            }
                        };
                        reader.readAsDataURL(file);
                        //转 失败
                        reader.onerror = function (error) {
                            layer.close(loadIndex);
                            reject(error);
                        };
                    } catch (e) {
                        // ignore
                    }
                });
            };

            $("#upLoad").off('click').on('click', function () {
                getBase64($("#uploadBack")[0]).then(function(data){
                    console.log(data);
                    $("#images").html(`<img src="${data}" width="500px" srcset="">`)
                })
            })
        })
    </script>
</body>

</html>

压缩之前:

image.png

测试效果:

image.png

0

评论区