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

},

});

相关推荐
一斤代码5 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子8 分钟前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年10 分钟前
从前端转go开发的学习路线
前端·学习·golang
中微子39 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina43 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409192 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js