千锋扣丁学堂HTML5培训之移动端Vue+Vant实现上传压缩旋转图片

今天千锋扣丁学堂HTML5培训老师给大家分享一篇关于移动端Vue+Vant的Uploader实现上传、压缩、旋转图片等功能的详细介绍，希望对同学们学习HTML5开发有所帮助，下面我们一起来看一下吧。

面向百度开发

html

<van-uploader :after-read="onRead" accept="image/*">
 <img src="./icon_input_add.png" />
</van-uploader>

js

data() {
 return {
 files: {
 name: "",
 type: ""
 },
 headerImage: null,
 picValue: null,
 upImgUrl,
 }
 },
 // 组件方法 获取 流
 async onRead(file) {
 // console.log(file);
 // console.log(file.file);
 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;
 //去获取拍照时的信息，解决拍出来的照片旋转问题
 Exif.getData(file, function () {
 Orientation = Exif.getTag(this, "Orientation");
 });
 // 看支持不支持FileReader
 if (!file || !window.FileReader) return;
 if (/^image/.test(file.type)) {
 // 创建一个reader
 let reader = new FileReader();
 // 将图片2将转成 base64 格式
 reader.readAsDataURL(file);
 // 读取成功后的回调
 reader.onloadend = function () {
 // 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上传图片的时候 被旋转的问题
 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();
 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);
 }
 }

以上所述是小编给大家介绍的移动端Vue+Vant的Uploader实现上传、压缩、旋转图片功能，希望对大家有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。