vant上传图片 转二进制_土旦:移动端 Vue+Vant 的Uploader 实现 :上传、压缩、旋转图片...
data() {return{
files: {
name:"",
type:""},
headerImage:null,
picValue:null,
upImgUrl,
}
},//组件方法 获取 流
asynconRead(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 = newFileReader();//将图片2将转成 base64 格式
reader.readAsDataURL(file);//读取成功后的回调
reader.onloadend =function () {//console.log(this.result);
let result = this.result;
let img= newImage();
img.src=result;//判断图片是否大于500K,是就直接上传,反之压缩图片
if (this.result.length <= 500 * 1024) {
self.headerImage= this.result;
self.postImg();
}else{
img.οnlοad=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;returnndata;
},//旋转图片
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= newUint8Array(n);while (n--) {
u8arr[n]=bstr.charCodeAt(n);
}return new File([u8arr], this.files.name, {
type:this.files.type
});
},//这里写接口
asyncpostImg() {
let file= this.dataURLtoFile(this.headerImage);
let formData= newwindow.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);
}
}
vant上传图片 转二进制_土旦:移动端 Vue+Vant 的Uploader 实现 :上传、压缩、旋转图片...相关推荐
- vant上传图片 转二进制_土旦:移动端 Vue+Vant 的Uploader 实现 :上传、压缩、旋转图片-Go语言中文社区...
data() {return{ files: { name:"", type:""}, headerImage:null, picValue:null, upI ...
- 小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
- vant weapp 多选上传图片_使用vant组件upLoad上传视频或图片
使用vant的uploader 组件上传视频或图片, /* 预先浏览显示 */ :key="v" @click="delImg(v)" class=" ...
- php上传图片限制类型,php,_使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 。都是默认的配置,php - phpStudy...
使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 $upl ...
- 为什么手机上传图片这么慢 前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
- vant步进器传值_有赞开源的Vue 2.0 的 Mobile 组件库 Vant
有赞开源的Vue 2.0 的 Mobile 组件库 Vant 是一个轻量.可靠的移动端 Vue 组件库.包括了基础组件.Button 按钮.Cell 单元格.Icon 图标.Image 图片.Layo ...
- vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小 可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件 其实这儿所说的压缩,就是图片重 ...
- vant步进器传值_Vant Uploader 文件上传
Vant Uploader 文件上传 Vant Uploader 文件上传组建主要实现手机端上传文件功能. 引入import Vue from 'vue'; import { Uploader } f ...
- Vant Uploader 文件上传
Uploader 文件上传 使用 VantUI 的 Uploader 组件进行文件上传 封装一个 upLoaderImg.js 公共方法 //upLoaderImg.js import axios f ...
- 图片上传成功但是图片显示不出来_小程序上传图片到腾讯云
这是小程序开发第二篇,主要介绍如何上传图片到腾讯云,之所以选择腾讯云,是因为腾讯云免费空间大 准备工作 上传图片主要是将图片上传到腾讯云对象存储(COS). 要使用对象存储 API,需要先执行以下步骤 ...
最新文章
- 如何在Android模拟器上安装和卸载APK程序包
- 对NumPy中dot()函数的理解(亲测,矩阵算法)
- 在使用线程池时应特别注意对ThreadLocal的使用
- 单链表实现一元多项式相加_python面试系列 01如何实现单链表的逆序
- Java常用的垃圾收集器_JVM垃圾收集算法及常用垃圾收集器
- python 错误代码_[python]WindowsError的错误代码详解
- LeetCode每周刷题(2019.7.1-2019.7.7)
- 深入理解函数中分配内存的问题
- TOMCAT报错解决
- 关于F类最基础的ADS仿真
- SourceOffsite安装配置
- C语言超全学习路线(少走弯路)
- .NET 7 预览版来啦,我升级体验了
- 路飞学城python电子书闲鱼_路飞学城-python开发集训-第一章之用户登录作业
- 石家庄地铁查询系统(双人项目)
- 漫谈程序员系列:你的幸运女神呢
- python实现根据文件名自动分类转移至不同的文件夹
- matlab中cell是什么意思,matlab中cell的用法
- 知乎,成也社区难也社区
- EasyExcel设置表格样式
热门文章
- 【TSP】基于matlab改进的人工鱼群算法求解旅行商问题【含Matlab源码 1479期】
- 【车牌识别】基于matlab投影模板匹配车牌识别【含Matlab源码 1359期】
- 【路径规划】基于matlab GUI机器人路径规划【含Matlab源码 1007期】
- xkcd目录_12条展示AI真相的XKCD片段
- 怎么升级Android Studio版本,Android studio 2 版本升级 Android studio 3 版本注意事项
- mysql单个表_mysql – 哪个更有效:一个长单表还是分布表?为什么?
- java 注解处理器的作用_JVM进阶 -- 浅谈注解处理器
- java 运算符适用类型_java基础(数据类型,运算符)
- 如何使用云效看板,让需求持续快速地流动和交付...
- 57 Insert Interval