layui在上传图片在前端处理图片压缩

有的人会遇到需要在前端代码处理图片压缩的问题,下面给大家分享怎么处理。

// 上传图片

var image_src

var IsImgDeal=false;

layui.upload.render({

    elem: "#{tag}{id}",

    url: sessionStorage.getItem('httpUrlPrefix') + '/upload/uploadImage',

    // dataType: 'text',

    // auto: false,

    // multiple: true,

    accept:"images",

    exts: 'jpg|png|jpeg',

    acceptMime:"image/jpeg,image/png",

    before: function (obj) {

        layer.msg("图片上传中...", { icon: 16, shade: 0.01 })

    },

    done: function(res){

         layer.msg(`<div style="display:flex;"><div class="tipsSuccess"></div>

                                               <div class="titleTips">提示

                                               </div>

                                             </div>

                                             <div class="context" ><br>上传成功!</div>`

            , {

                skin: 'success-class',

                time: 1000

            });

             layer.closeAll('loading'); //关闭loading

        console.log("sfafasfa",JSON.stringify(res))

        image_src = res.url

        IsImgDeal = false;

    },

    choose: function (obj) {

        obj.preview(function (index, file, result) {

            console.log("================>",file)

            let filename = file.name

            // console.log("================>",result)

            //临时存储二进制流

            $("#uploadnewImg-{id}").hide()

            $("#uploadexistimg-{id}").show()

            $("#uploadImg-{id}").attr("src", result);

        });

if (IsImgDeal) {

                        return;//图片处理过就直接上传

                    }

                    console.log("图片压缩开始处理");

                    var files = obj.pushFile();

                    var file_tar = null,index_tar = null;

                    for (var k in files) {

                        index_tar = k;

                        file_tar = files[k];

                        break;

                    }

                    

                    

                    //进行图片压缩,直接百度压缩方法

                    let reader = new FileReader();

                    var filename = file_tar.name;

                    

                    reader.readAsDataURL(file_tar);

                    

                    reader.onload = function () {

                        

                        let content = this.result; //图片的src,base64格式

                        let img = new Image();

                        img.src = content;

                        img.onload = function () { //图片加载完毕

                            

                            let canvas = document.createElement("canvas");

                            let ctx = canvas.getContext('2d');

                            

                            let width = Math.ceil(img.width*0.8);

                            let height = Math.ceil(img.height*0.8);

                            canvas.width = width;

                            canvas.height = height;

                            ctx.drawImage(img, 0, 0, width, height);//压缩图片尺寸

                            let dataURL = canvas.toDataURL("image/jpeg");//如果是需要质量压缩就补充参数

                            //将base64数据转化为文件对象

                            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);

                            }

                            IsImgDeal = true;//设置标记

                            //如果有时差问题,后面setTimeout延时再执行,让原来的上传终止

                            obj.upload(index_tar, new File([new Blob([u8arr], { type: mime })], filename));//单独上传

                            

                            //uploadIns.upload();//重新启动全部文件上传

                        }

                    };

                   layer.load(); //上传loading

                    //停止原本的上传,如果多个文件,需要在读取完毕后将files里面的文件队列全删除。

                    return delete files[index_tar];

        

    },

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/98290.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity中Shader光强与环境色

文章目录 前言一、实现下图中的小球接受环境光照实现思路&#xff1a;1、在Pass中使用前向渲染模式2、使用系统变量 _LightColor0 获取场景中的主平行灯 二、返回环境中主环境光的rgb固定a(亮度)&#xff0c;小球亮度还随之改变的原因三、获取Unity中的环境光的颜色1、Color模式…

练[SUCTF 2019]CheckIn

[SUCTF 2019]CheckIn 文章目录 [SUCTF 2019]CheckIn掌握知识解题思路关键paylaod 掌握知识 ​ .user.ini文件上传利用–需要上传目录有一个php文件(index.php)&#xff0c;文件头绕过&#xff0c;文件内容<&#xff1f;检测 解题思路 打开题目链接&#xff0c;发现又是一…

模块化编程+LCD1602调试工具——“51单片机”

各位CSDN的uu们你们好呀&#xff0c;小雅兰又来啦&#xff0c;刚刚学完静态数码管显示和动态数码管显示&#xff0c;感觉真不错呢&#xff0c;下面&#xff0c;小雅兰就要开始学习模块化编程以及LCD1602调试工具的知识了&#xff0c;让我们进入51单片机的世界吧&#xff01;&am…

Python数据攻略-Mongodb数仓无法写入方法汇总

Mongodb作为一个非结构化的NoSQL数据库,能存储各种复杂和多变的数据格式,如JSON。这使得Mongodb在实时数据分析和高性能查询中具有优势。 在使用Mongodb的过程中,可能会遇到写入失败的问题。常见的几种情况包括无法建立连接、认证失败和存储限制。 文章目录 诊断问题日志分…

Zabbix配置监控文件系统可用空间小于30GB自动告警

一、创建监控项 二、配置监控项 #输入名称–>键值点击选择 #找到磁盘容量点击 注&#xff1a; 1、vfs 该键值用于检测磁盘剩余空间&#xff0c;zabbix 内置了非常多的键值可以选着使用 2、单位B不需要修改&#xff0c;后期图表中单位和G拼接起来就是GB 3、更新时间 10S…

❋JQuery的快速入门2 jq鼠标滚轮

onmousewheelscript当鼠标滚轮正在被滚动时运行的脚本。 主要是利用top与left进行上下移动和左右移动 【使用获取的角度正值还是负值&#xff0c;判断是向上还是上下滚动】 $(element).on("mousewheel", function(event){var de event.originalEvent.deltaY; //需要…

基于springboot实现汽车租赁管理系统项目演示【项目源码+论文说明】分享

基于springboot实现汽车租赁管理系统项目演示 摘要 随着社会的发展&#xff0c;计算机的优势和普及使得汽车租赁系统的开发成为必需。汽车租赁系统主要是借助计算机&#xff0c;通过对汽车租赁信息等信息进行管理。减少管理员的工作&#xff0c;同时也方便广大用户对个人所需汽…

异常:找不到匹配的key exchange算法

目录 问题描述原因分析解决方案 问题描述 PC 操作系统&#xff1a;Windows 10 企业版 LTSC PC 异常软件&#xff1a;XshellPortable 4(Build 0127) PC 正常软件&#xff1a;PuTTY Release 0.74、MobaXterm_Personal_23.1 服务器操作系统&#xff1a;OpenEuler 22.03 (LTS-SP2)…

树的基本概念及二叉树

目录 一、树的基本概念 &#xff08;1&#xff09;树的结点 &#xff08;2&#xff09;度 &#xff08;3&#xff09;结点层次 &#xff08;4&#xff09;树的高度 树的特点&#xff1a; 二、二叉树 &#xff08;1&#xff09;满二叉树 &#xff08;2&#xff09;完…

【18】c++设计模式——>适配器模式

c的适配器模式是一种结构型设计模式&#xff0c;他允许将一个类的接口转换成另一个客户端所期望的接口。适配器模式常用于已存在的&#xff0c;但不符合新需求或者规范的类的适配。 在c中实现适配器模式时&#xff0c;通常需要一下几个组件&#xff1a; 1.目标接口&#xff08;…

vue 2 与 vue3 获取模版引用 (ref)的区别

目录 Vue 2 中获取模板引用 获取DOM元素引用 获取组件引用 v-for 中的模板引用 vue3 中获取模板引用 访问模板引用 v-for 中的模板引用 函数模板引用 组件上的 ref 虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作&#xff0c;但在某些情况下&#xff0c…

JVM(八股文)

目录 一、JVM简介 二、JVM中的内存区域划分 三、JVM加载 1.类加载 1.1 加载 1.2 验证 1.3 准备 1.4 解析 1.5 初始 1.6 总结 2.双亲委派模型 四、JVM 垃圾回收&#xff08;GC&#xff09; 1.确认垃圾 1.1 引用计数 1.2 可达性分析&#xff08;Java 采用的方案&a…

Hudi 系列-基础概念-索引机制

目录 前言问题作用减少开销怎么理解数据变更基础 类型全局索引FlinkSpark 总结 前言 Hudi 系列文章在这个这里查看 https://github.com/leosanqing/big-data-study 索引(Index)是 Hudi 最重要的特性之一,也是区别于之前传统数仓 Hive 的重要特点, 是实现 Time Travel, Update…

抢先知:公抓抓 信息挖掘工具

随着经济全球化进程的加速&#xff0c;企业在不断发展和壮大&#xff0c;同时也在不断地适应市场的变化。在这个过程中&#xff0c;企业信息的及时获取和掌握变得至关重要。那么&#xff0c;最新企业信息哪里找呢&#xff1f;在这里介绍几个路径&#xff0c;可以参考&#xff0…

ARM:使用汇编完成三个灯流水亮灭

1.汇编源代码 .text .global _start _start: 设置GPIOF寄存器的时钟使能LDR R0,0X50000A28LDR R1,[R0]ORR R1,R1,#(0x1<<5)STR R1,[R0]设置GPIOE寄存器的时钟使能LDR R0,0X50000A28LDR R1,[R0] 从r0为起始地址的4字节数据取出放在R1ORR R1,R1,#(0x1<<4) 第4位设…

Visual Studio自定义模板参数、备注

模板路径&#xff1a; VS2022 x64&#xff1a;C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\ItemTemplatesVS2022 x86&#xff1a;C:\Program Files (x86)\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\ItemTemplates 一、声明和启用模板…

4.方法操作实例变量 对象的行为

4.1 操作对象状态的方法 同一类型的每个对象能够有不同的方法行为&#xff0c;任一类的每个实例都带有相同的方法&#xff0c;但是方法可以根据实例变量的值来表现不同的行为。 play()会播放title值表示的歌曲&#xff0c;调用某个实例的play()可能会播放“Politik”而另一个会…

在linux下的vim中使用内联函数时,会有未定义的引用错误解决办法

在linux下的vim中使用内联函数时&#xff0c;会有未定义的引用错误解决办法 1.在vim中&#xff0c;使用内敛函数可能会导致一些问题&#xff0c;因为在vim中编辑c代码时&#xff0c;可能会使用不同的编译选项和链接器选项&#xff0c;这些选项可能会影响内敛函数的行为。 2.如…

Zabbix自定义脚本监控MySQL数据库

一、MySQL数据库配置 1.1 创建Mysql数据库用户 [rootmysql ~]# mysql -uroot -p create user zabbix127.0.0.1 identified by 123456; flush privileges; 1.2 添加用户密码到mysql client的配置文件中 [rootmysql ~]# vim /etc/my.cnf.d/client.cnf [client] host127.0.0.1 u…

JMeter压测如何分配业务比例?

在进行综合场景压测时&#xff0c;由于不同的请求&#xff0c;要求所占比例不同&#xff0c;那如何实现呢&#xff1f; 有人说将这些请求分别放到单独的线程组下&#xff0c;然后将线程组的线程数按照比例进行配置&#xff0c;这种方法不是很好&#xff0c;想想&#xff0c;不…