分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

原生JS,前端压缩图片方案

发布时间:2023-09-06 01:43责任编辑:傅花花关键词:前端
        在移动互联网高速发展的今天,有太多太多的应用需要用户在移动Web上传图片文件。然而在上传图片前就对图片进行了压缩处理,从而提高图片的上传效率,减少用户的流量浪费,后台处理和用户体验也会得到提升。

为什么要这样做

        遇到的问题:

        1:在低网速下上传图片进度缓慢,用户体验差

        2:后台处理较大的文件压力大。

        3:业务需求要求文件大小、、等等(或许还有更多)

        在处理以上问题之前,需要给自己一些疑问

        1:图片是否有必要保存原图

        2:主要使用场景在移动端还是在PC端(图片处理消耗的性能和速度需要考虑)

        3:需要上传的图片一般大小大致在什么范围(处理图片的性能消耗时长)



ImgB64.js用法

    1、创建ImgB64,初始化压缩图片的参数:如下

        var img=new ImgB64({
           size:1024,//需要压缩图片的最小值。不填默认压缩所有,此处单位是Kb
           quality:20//图片自定义压缩质量,不填默认50(最大值是100)
       })
   2:引用,因为读取文件,img加载读取原始高宽,引用了异步的onload,此处传入方法执行处理后的图片base64。
       img.setOption({
           files:ele.files[0],
           showImg:function(imgBase64){

           },
       callback:function(imgBase64){
           console.log(imgBase64);
       }
   })
   
   Git:ImgB64
   《后续持续完善……》


原生JS,前端压缩图片方案

原文地址:http://blog.51cto.com/8312284/2072917

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved