112 lines
3.0 KiB
JavaScript
112 lines
3.0 KiB
JavaScript
/**
|
||
images压缩扩展模块
|
||
changlin_zhao@qq.com
|
||
2021.5.25
|
||
**/
|
||
|
||
layui.define(['upload','layer'],function(exports){
|
||
var upload = layui.upload;
|
||
var layer = layui.layer;
|
||
var compressImage = {
|
||
uploads: function(obj){
|
||
//obj.preview(function(index, file, result){
|
||
|
||
//执行实例
|
||
var files = obj.pushFile();
|
||
var filesArry = [];
|
||
for (var key in files) { //将上传的文件转为数组形式
|
||
filesArry.push(files[key])
|
||
}
|
||
var index = filesArry.length - 1;
|
||
var file = filesArry[index]; //获取最后选择的图片,即处理多选情况
|
||
|
||
if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
|
||
.replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
|
||
return obj.upload(index, file)
|
||
}
|
||
canvasDataURL(file, function (blob) {
|
||
var aafile = new File([blob], file.name, {
|
||
type: file.type
|
||
})
|
||
var isLt1M;
|
||
if (file.size < aafile.size) {
|
||
isLt1M = file.size
|
||
} else {
|
||
isLt1M = aafile.size
|
||
}
|
||
|
||
if (isLt1M / 1024 / 1024 > 2) {
|
||
return layer.alert('上传图片过大！')
|
||
} else {
|
||
if (file.size < aafile.size) {
|
||
return obj.upload(index, file)
|
||
}
|
||
obj.upload(index, aafile)
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
function canvasDataURL(file, callback) { //压缩转化为base64
|
||
var reader = new FileReader()
|
||
reader.readAsDataURL(file)
|
||
reader.onload = function (e) {
|
||
const img = new Image()
|
||
const quality = 0.8 // 图像质量
|
||
const canvas = document.createElement('canvas')
|
||
const drawer = canvas.getContext('2d')
|
||
img.src = this.result
|
||
img.onload = function () {
|
||
|
||
var originWidth = img.width,/* 图片的宽度 */
|
||
originHeight = img.height; /* 图片的高度 */
|
||
|
||
// 设置最大尺寸限制，将所有图片都压缩到小于1m
|
||
const maxWidth = 2560, maxHeight = 1600;
|
||
// 需要压缩的目标尺寸
|
||
let targetWidth = originWidth, targetHeight = originHeight;
|
||
// 等比例计算超过最大限制时缩放后的图片尺寸
|
||
if (originWidth > maxWidth || originHeight > maxHeight) {
|
||
if (originWidth / originHeight > 1) {
|
||
// 宽图片
|
||
targetWidth = maxWidth;
|
||
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
||
} else {
|
||
// 高图片
|
||
targetHeight = maxHeight;
|
||
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
||
}
|
||
}
|
||
|
||
canvas.width = targetWidth;
|
||
canvas.height = targetHeight;
|
||
drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
|
||
convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
|
||
}
|
||
}
|
||
}
|
||
|
||
function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式
|
||
const arr = urlData.split(',')
|
||
const mime = arr[0].match(/:(.*?);/)[1]
|
||
const bstr = atob(arr[1])
|
||
let n = bstr.length
|
||
const u8arr = new Uint8Array(n)
|
||
while (n--) {
|
||
u8arr[n] = bstr.charCodeAt(n)
|
||
}
|
||
callback(new Blob([u8arr], {
|
||
type: mime
|
||
}));
|
||
}
|
||
|
||
|
||
//})
|
||
}
|
||
}
|
||
//输出 imgcom 接口
|
||
exports('imgcom', compressImage);
|
||
});
|
||
|