小猿圈html5前端开发之移动端Vue+Vant实现上传压缩旋转图片...
对于学习前端的小伙伴，移动端也是不陌生的吧，今天小猿圈web前端讲师就讲一下移动端Vue+Vant实现上传压缩旋转图片功能的详细介绍，希望对于学习web前端的同学有所帮助。https://upload-images.jianshu.io/upload_images/15397392-f96b9bdec791b415.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240面向百度开发html<van-uploader :after-read="onRead" accept="image/*"><img src="./icon_input_add.png" /></van-uploader>jsdata() { 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), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr = bstr.charCodeAt(n); } return new File(, 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); } }小猿圈web前端讲师认为：授之以鱼更授之以渔，想要学好web前端首先需要就是端正自己的学习态度，明确学习目标，这样才能坚持学习。想要了解更多关于前端方面的小伙伴web前端自学②群：738735873，可以关注小猿圈每天的动态，会不定期更新互联网编程知识，希望对你的学习有一定的帮助。
页:
[1]