vue 在结合 vant 写移动端时上传图片之前，压缩图片大小

认定了就要好好的珍惜对待，人生不容辜负，你必须要更加努力。加油骚年。

正文：

vue 在结合 vant 写移动端的时上传图片给后台一般是直接上传整个文件
那么肯定对图片的大小有限制这时候就需要压缩图片大小了

直接拿去复制即可使用记得装包废话少说直接干就完事了

<template><van-uploader:max-count="1"v-model="identityCard":after-read="onRead"></van-uploader>
</template>npm install exif-js --save   安装 并且引入
import axios from "axios"; // 引入axios
//这里解释下 只所以单独引入一次axios 是不能走封装好的axios 因为传的是文件流传不过去 所以单独拿出来传
import Exif from 'exif-js'data() {return {// 图片信息files: {name: "",type: ""},}},methods:{// 点击上传图片 onRead(file) {this.files.name = file.file.name; // 获取文件名this.files.type = file.file.type; // 获取类型this.imgPreview(file.file);  //这一块传的是file.file 那后面才传给后台的 就不需要file.file}// 处理图片imgPreview(file) {let self = this;let Orientation;//去获取拍照时的信息，解决拍出来的照片旋转问题   npm install exif-js --save   这里需要安装一下包Exif.getData(file, function () {Orientation = Exif.getTag(this, "Orientation");});// 看支持不支持FileReaderif (!file || !window.FileReader) return;if (/^image/.test(file.type)) {// 创建一个readerlet reader = new FileReader();// 将图片2将转成 base64 格式reader.readAsDataURL(file);// 读取成功后的回调reader.onloadend = function () {let result = this.result;let img = new Image();img.src = result;//判断图片是否大于600K,否就直接上传，反之压缩图片console.log(this.result.length);if (this.result.length <= 600 * 1024) {// 上传图片self.postImg(this.result);} else {img.onload = function () {let data = self.compress(img, Orientation);// 上传图片self.postImg(data);};}};}},// 压缩图片compress(img, Orientation) {// console.log(img, Orientation);let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");//瓦片canvaslet 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.2);tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;// console.log(ndata);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);}console.log(u8arr);return new File([u8arr], this.files.name, {type: this.files.type,});},// 提交图片到后端postImg(base64){let file = this.dataURLtoFile(base64);console.log(file)this.showloading = true;this.maskLayer = true;var ininsData = new window.FormData(); //构造一个 FormData，把后台需要发送的参数添加ininsData.append("file", file); //接口需要传的参数console.log(ininsData);axios.post("写传给后台的地址 ", ininsData, {headers: {"Content-Type": "multipart/form-data",},}).then((res) => {console.log(res)}).catch((err) => {});}}

如有不足之处请指出来或联系邮箱 yuyong1663519276@163.com 谢谢

vue 在结合 vant 写移动端时上传图片之前，压缩图片大小相关推荐

vue之原生上传图片并压缩图片大小（1）
vue之上传图片并压缩图片大小 vue之上传图片并压缩图片大小 vue之上传图片并压缩图片大小这里使用的是 compressorjs , 安装 npm i compressorjs 注意:这个插件是 ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...
vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）
vue的图片上传这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了.这个项目中使用vux作为ui ...
移动端拍照上传图片之后压缩以及图片旋转问题
一.问题针对旧项目翻新,旧的项目是使用lrz(官网)插件压缩图片,17年的项目了使用原生js写的,原项目上传拍照图片不会有旋转的问题,要翻成vue+webpack,同样使用lrz压缩图片时在部分小米 ...
word排版时如何保证每张图片大小一样？
问题描述为了保证文档的美观性,在对图片进行排版时,最好保证图片的大小一致,尤其是多张图片组成一张大图时. 如果一张张图片调整大小,那真的是毫无技术含量的耗时工作. 解决方案在这提出一种借助表格的解 ...
在写移动端时，a标签或者input标签等在手机上点击背后会有阴影的解决办法
a,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 被背景设置成透明的就行了转载于:https://www.cnblogs.com/Nick- ...
在csdn平台写博客时，如何插入图片
在创作第一篇csdn博客时,插入图片遇到了问题,下面介绍一下正确插入图片的方法(图片要符合格式.大小规范). 完成上面5个步骤,就能成功插入图片了. 我遇到有种情况就是,按照这个步骤执行却看不到插入图 ...
【VUE】将图片的url或file类型转换成base64，并压缩图片大小
话不多,看代码! 1.将图片的url转换成base64 urlTobase64(url) {var that = thisvar img = new Image()img.src = url + '? ...
vant上传图片时压缩图片
vant上传图片,有图片的宽高大小限制,可以上传时压缩图片,在这里记录一下. 压缩图片大小 afterRead(file){console.log(file,'0000')this.face = [] ...

vue 在结合 vant 写移动端时上传图片之前，压缩图片大小

认定了就要好好的珍惜对待，人生不容辜负，你必须要更加努力。加油骚年。

正文：

vue 在结合 vant 写移动端时上传图片之前，压缩图片大小相关推荐

最新文章

热门文章

vue 在结合 vant 写移动端时上传图片之前，压缩图片大小

认定了 就要好好的珍惜对待，人生不容辜负，你必须要更加努力 。加油 骚年。

正文：

vue 在结合 vant 写移动端时上传图片之前，压缩图片大小相关推荐

最新文章

热门文章

认定了就要好好的珍惜对待，人生不容辜负，你必须要更加努力。加油骚年。