有关图片上传压缩的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>upload组件多图片上传</title>
<!-- <link rel="stylesheet" href="./css/reset.css"> -->
<link rel="stylesheet" href="./css/vant.css">
<style>
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>图片上传压缩</h1>
<div class="uploadImgs">
<van-uploader
v-model="fileList"
multiple
class="uploaderOne"
:before-read="beforeRead"
:after-read="onRead"
capture="camera"
accept=".jpeg , .png , .mp4, .jpg"
:max-count="4" >
</van-uploader>
</div>
</div>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/vant.js"></script>
<script type="text/javascript" src="./js/exif.min.js"></script>
<script>
function uploads(){
new Vue({
el: '#app',
data: {
files: {
name: "",
type: ""
},
fileList:[],
headerImage: null,
picValue: null,
upImgUrl:'api'
},
created: function(){
},
methods:{
// 上传前置处理
beforeRead(file){
// console.log(file);
// console.log(file.length,'88');
if (file instanceof Array) {
//判断是否是数组
let a = file.every((v)=>{
return this.checkFile(v)
})
// console.log(a,'aa');
if(a){
return true
} else {
return false
}
} else {
if(this.checkFile(file)) {
return true;
} else {
return false;
}
}
},
//图片类型检查
checkFile(file) {
// console.log(11111);
const format = ["jpg", "png", "jpeg", 'mp4'];
const index = file.name.lastIndexOf(".");
const finalName = file.name.substr(index + 1);
if (!format.includes(finalName.toLowerCase())) {
this.$toast("请上传" + format.join(",") + "格式图片");
return false;
} else {
return true;
}
},
async onRead(file){
if (file instanceof Array) {
console.log(file,'aaa');
for(var i = 0;i < file.length; i++){
file[i].status = "uploading";
file[i].message = "上传中...";
this.files.name = file[i].file.name; // 获取文件名
this.files.type = file[i].file.type; // 获取类型
this.picValue = file[i].file; // 文件流
this.imgPreview(this.picValue);
}
} else {
file.status = "uploading";
file.message = "上传中...";
console.log('bbb');
this.files.name = file.file.name; // 获取文件名
this.files.type = file.file.type; // 获取类型
this.picValue = file.file; // 文件流
this.imgPreview(this.picValue);
}
},
// 处理图片
imgPreview(file) {
let self = this;
let Orientation;
//去获取拍照时的信息，解决拍出来的照片旋转问题 Orientation：方向
EXIF.getData(file, function () {
console.log(this,'this');
Orientation = EXIF.getTag(this, "Orientation");
});
console.log(Orientation,'Orientation');
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if (/^image/.test(file.type)) {
// 创建一个reader
let reader = new FileReader();
// 将图片2将转成 base64 格式 readAsDataURL(file)：将文件读取为 DataURL abort(none)：中断读取 readAsBinaryString(file):将文件读取为二进制码 readAsText(file,[encoding]):将文件读取为文本
reader.readAsDataURL(file);
// 读取成功后的回调 onabort: 中断时触发 onerror : 出错时触发 onload :文件读取成功完成时触发 onloadend :读取完成触发，无论成功或失败 onloadstart 读取开始时触发 onprogress 读取中
reader.onloadend = function () {
// 文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
// console.log(this.result);
let result = this.result;
let img = new Image();
img.src = result;
//判断图片是否大于500K,是就直接上传，反之压缩图片
if (this.result.length <= 500 * 1024) {
self.headerImage = this.result;
self.postImg();
} else {
img.onload = function () {
let data = self.compress(img, Orientation);
self.headerImage = data;
self.postImg();
};
}
};
}
},
// 压缩图片
compress(img, Orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
//瓦片canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
// let initSize = img.src.length;
let width = img.width;
let height = img.height;
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
let ratio;
if ((ratio = (width * height) / 4000000) > 1) {
// console.log("大于400万像素");
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
let count;
if ((count = (width * height) / 1000000) > 1) {
// console.log("超过100W像素");
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count);
let nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (let i = 0; i < count; i++) {
for (let j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//修复ios上传图片的时候 出现奇怪的旋转角度，相机拍出来的图片拥有很多属性，其中一项是Orientation ，用于记录拍摄时相机物理旋转角度，例如把相机倒过来Orientation 是3，顺时针竖起来Orientation 是6，逆时针竖起来Orientation 是8，正常模式Orientation 是1。
if (Orientation != "" && Orientation != 1) {
switch (Orientation) {
case 6: //需要顺时针（向左）90度旋转
this.rotateImg(img, "left", canvas);
break;
case 8: //需要逆时针（向右）90度旋转
this.rotateImg(img, "right", canvas);
break;
case 3: //需要180度旋转
this.rotateImg(img, "right", canvas); //转两次
this.rotateImg(img, "right", canvas);
break;
}
}
//进行最小压缩
let ndata = canvas.toDataURL("image/jpeg", 0.1);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
},
// 旋转图片
rotateImg(img, direction, canvas) {
//最小与最大旋转方向，图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
let height = img.height;
let width = img.width;
let step = 2;
if (step == null) {
step = min_step;
}
if (direction == "right") {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
let degree = (step * 90 * Math.PI) / 180;
let ctx = canvas.getContext("2d");
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
},
//将base64转换为文件
dataURLtoFile(dataurl) {
var arr = dataurl.split(","),
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], this.files.name, {
type: this.files.type
});
},
//这里写接口
async postImg() {
let file = this.dataURLtoFile(this.headerImage);
let formData = new window.FormData();
// append 往后端传值是一个个的传
formData.append("file", file);
// toast_loding(this, "图片上传中···");
try {
let res = await util.ajax.post(this.upImgUrl, formData, {
headers: {
"Content-Type": "multipart/form-data"
}
});
} catch (e) {
console.log(e);
}
}
}
});
}
uploads()
</script>
</body>
</html>
1699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
