对于学习前端的小伙伴, 移动端也是不陌生的吧, 今天小猿圈 web 前端讲师就讲一下移动端 vue+Vant 实现上传压缩旋转图片功能的详细介绍, 希望对于学习 Web 前端的同学有所帮助.
面向百度开发
- 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 || !Windows.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 Windows.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 前端自学2群: 738735873, 可以关注小猿圈每天的动态, 会不定期更新互联网编程知识, 希望对你的学习有一定的帮助.
来源: http://www.jianshu.com/p/8361136ac653