113 lines
3.0 KiB
JavaScript
113 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.5 // 图像质量
|
|||
|
|
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 = 1024, maxHeight = 1024;
|
|||
|
|
// 需要压缩的目标尺寸
|
|||
|
|
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);
|
|||
|
|
});
|
|||
|
|
|