资讯专栏INFORMATION COLUMN

js压缩图片到2m以下

荆兆峰 / 2944人阅读

摘要:因为的同事说,页面上的图片要直接调用七牛的接口上传到七牛,所以后端那边不能处理,必须前端这边把图片处理到以下。压缩的图片质量也设置了一个奇奇怪怪的值。

用的canvas。这个问题测试妹子反馈了好几次bug,解决了好多次,虽然用了比较僵硬的办法,但总算最终解决了。

因为php的同事说,页面上的图片要直接调用七牛的接口上传到七牛,所以后端那边不能处理,必须前端这边把图片处理到2m以下。可是我感觉用之前的办法只是把宽高变小,并不能保证压缩后一定就小于2m。所以没办法吧,还是得搞。

/**
 * 将图片转化为base64
 */
function imgBase64(file) {
    var self = this;
    // 看支持不支持FileReader
    if (!file || !window.FileReader) return;
    // 创建一个 Image 对象
    var image = new Image();
    // 绑定 load 事件处理器,加载完成后执行
    image.onload = function(){
        // 获取 canvas DOM 对象
        var canvas = document.createElement("canvas")
        // 返回一个用于在画布上绘图的环境, "2d" 指定了您想要在画布上绘制的类型
        var ctx = canvas.getContext("2d")
        // 如果高度超标 // 参数,最大高度
        var MAX_HEIGHT = 9000;
        if(image.height > MAX_HEIGHT) {
            // 宽度等比例缩放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        // 获取 canvas的 2d 环境对象,
        // 可以理解Context是管理员,canvas是房子
        // canvas清屏
        console.log("canvas.width:", canvas.width);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 重置canvas宽高
        canvas.width = image.width;
        canvas.height = image.height;
        // 将图像绘制到canvas上
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // !!! 注意,image 没有加入到 dom之中
        console.log(file.type);
        // console.log(canvas.toDataURL("image/jpeg",0.5));
        //----------//
        var maxSize = 2*1024; // 2M
        var fileSize = file.size/1024; // 图片大小
        if(fileSize > maxSize) { // 如果图片大小大于2m,进行压缩
            console.log(maxSize,fileSize, maxSize/fileSize );
            uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
            document.getElementById("previewImage").src = uploadSrc;
            uploadFile = convertBase64UrlToFile(uploadSrc, file.name.split(".")[0]); // 转成file文件
        } else {
            uploadSrc = canvas.toDataURL(file.type, 0.5);
            document.getElementById("previewImage").src = uploadSrc;
            uploadFile = file;
        }
        //--------//
    };
    if (/^image/.test(file.type)) {
        // 创建一个reader
        var reader = new FileReader();
        // 将图片将转成 base64 格式
        reader.readAsDataURL(file);
        // 读取成功后的回调
        reader.onload = function () {
            // 设置src属性,浏览器会自动加载。
            // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
            image.src = this.result;
        }
    }
}

这段代码是找的之前别人写过的代码,然后自己加了点东西凑合用的。
之前没怎么弄过压缩图片,直觉觉得不能把宽高压缩的太小,怕把图片给压缩模糊了,于是傻逼的把最大高度设置了9000。

var MAX_HEIGHT = 9000;

压缩的图片质量也设置了一个奇奇怪怪的值。

uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize); 

测试了一波上线了,结果果然出问题了。测试同学反馈用户的问题:压缩后会大于2m!于是脑子进水的改了一波。

var maxSize = 1.5*1024; // 1.5M

结果又测出了问题:小于2m的图片压缩后会出现大于2m的情况!才忽然想到一个问题,大于1.5m的图片转base64之后是可能大于2m的,自己就是瞎改。

于是又想着把最大高度改了,试试。顺便把图片质量降低。

var MAX_HEIGHT = 4000;
...
uploadSrc = canvas.toDataURL(file.type, 0.3); // 把0.5改成了0.3

结果测试妹子测完后心虚的问,完全没问题了么?心里也比较虚的不得了,干脆加了一个判断,压缩后还是大于2m的话,就提示重新上传图片。当时都上线了,结果过了几天测试妹子一琢磨,这么提示还是不友好,不合理,又开始敦促优化。

给改了方案,压缩之后如果大于2m,就再进行压缩,心想着这应该万无一失了,果然很久测试和用户都没再反映,至少通过了一段比较长时间的实践检验。
其实把最大高度还改小了一点,改成了3000,但感觉也并什么用。

/**
 * 校验图片转换后大小并上传
*/
function checkAndHandleUpload(file) {
    imgBase64(file, function (image, canvas) {
        var maxSize = 2*1024; // 2M
        var fileSize = file.size/1024; // 图片大小

        if(fileSize > maxSize) { // 如果图片大小大于2m,进行压缩
            console.log(maxSize,fileSize, maxSize/fileSize );
            uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
            uploadFile = convertBase64UrlToFile(uploadSrc, file.name.split(".")[0]); // 转成file文件
        } else {
            uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
            uploadFile = file;
        }

        var compressedSize = uploadFile.size / 1024 / 1024;
        if(compressedSize.toFixed(2) > 2.00) {
            checkAndHandleUpload(uploadFile);
        } else {
            document.getElementById("previewImage").src = uploadSrc;
        }
    });
}

/**
 * 将图片转化为base64
 */
function imgBase64(file, callback) {
    var self = this;
    // 看支持不支持FileReader
    if (!file || !window.FileReader) return;
    // 创建一个 Image 对象
    var image = new Image();
    // 绑定 load 事件处理器,加载完成后执行
    image.onload = function(){
        // 获取 canvas DOM 对象
        var canvas = document.createElement("canvas")
        // 返回一个用于在画布上绘图的环境, "2d" 指定了您想要在画布上绘制的类型
        var ctx = canvas.getContext("2d")
        // 如果高度超标 // 参数,最大高度
        var MAX_HEIGHT = 3000;
        if(image.height > MAX_HEIGHT) {
            // 宽度等比例缩放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        // 获取 canvas的 2d 环境对象,
        // 可以理解Context是管理员,canvas是房子
        // canvas清屏
        console.log("canvas.width:", canvas.width);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 重置canvas宽高
        canvas.width = image.width;
        canvas.height = image.height;
        // 将图像绘制到canvas上
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // !!! 注意,image 没有加入到 dom之中
        console.log(file.type);
        // console.log(canvas.toDataURL("image/jpeg",0.5));
        //----------//
        callback(image, canvas);
        //--------//
    };
    if (/^image/.test(file.type)) {
        // 创建一个reader
        var reader = new FileReader();
        // 将图片将转成 base64 格式
        reader.readAsDataURL(file);
        // 读取成功后的回调
        reader.onload = function () {
            // self.imgUrls.push(this.result);
            // 设置src属性,浏览器会自动加载。
            // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
            image.src = this.result;
        }
    }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88882.html

相关文章

  • Vue使用mixins手写压缩图片代码

    摘要:一介绍本文将介绍再项目中通过对图片进行压缩后使用。把图片能转换成出发事件对赋值完成,触发事件生成,调用回调函数。将图片将转成格式把转换成文件四压缩完成使用五参考链接压缩图片到以下 一、介绍 本文将介绍再Vue项目中通过js对图片进行压缩后使用。(纯前端实现,不依赖后台) 主要使用Canvas.toDataURL(type, encoderOptions)对图片大小进行调整 参数 描...

    CoXie 评论0 收藏0
  • 在浏览器端用H5实现图片压缩上传

    摘要:一需求的场景在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上。 一、需求的场景: 在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上。 功能实现后我们发现一个问题,公司公共的服务器有2M...

    snowLu 评论0 收藏0
  • 在浏览器端用H5实现图片压缩上传

    摘要:一需求的场景在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上。 一、需求的场景: 在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上。 功能实现后我们发现一个问题,公司公共的服务器有2M...

    Flink_China 评论0 收藏0

发表评论

0条评论

荆兆峰

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<