vant 上传照片压缩旋转

html 代码

<label for='uploadOne' class='photo-main' ><div class="show"><div class="picture"><img style="width:100%" :src="url" alt=""></div></div>
</label>
<div v-show="false"><van-uploader id="uploadOne" max-count="1" :after-read="afterReadOne" ></van-uploader>
</div>`

js 代码

afterReadOne(file){this.imgData(file)
},
imgData(file){  // 照片详情  第几张照片this.url = file.contentlet img = document.createElement('img')img.src = file.contentlet num = ''if(file.file.size < 512000){  // 500k 以内num = '1'  // 压缩百分比}elseif(file.file.size > 512000 && file.file.size <= 1048576){  //  500k 到 1Mnum = 0.8  // 压缩百分比}else if(file.file.size > 1048576 && file.file.size<= 3145728){  // 1M 到 3Mnum = 0.6  // 压缩百分比}else if(file.file.size > 3145728 && file.file.size<= 5242880){  // 3M 到 5Mnum = 0.3  // 压缩百分比}else{   // 5M  以上num = 0.2  // 压缩百分比}this.canvasDataURL(img,{'quality' :num}, file.file.type)
},
canvasDataURL(img,obj,type){img.onload = () =>{var w = img.width,h = img.height;var quality = 0.7;var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var anw = document.createAttribute("width");var anh = document.createAttribute("height");let st = falseif(h/w > 1){ // 竖图  旋转90st = trueanw.nodeValue = h;anh.nodeValue = w;}else{anw.nodeValue = w;anh.nodeValue = h;}canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);if(st){ctx.rotate(270 * Math.PI / 180)  // 逆时针旋转}ctx.drawImage(img, 0, 0, -w, h);if(obj.quality && obj.quality <= 1 && obj.quality > 0){quality = obj.quality;}var base64 = canvas.toDataURL(type, quality);  // 返回的base64// 调接口}
},

vant 上传照片压缩旋转相关推荐

手机端上传照片压缩功能canvas
手机上传照片拍摄的照片像素很高需要压缩后上传,移动端前端压缩照片的方法一般是用canvas,然后转换成base64或者blob,发送后台. <div class="img-btn1&q ...
android 三星手机拍照旋转90度,解决三星拍照上传照片被旋转90度，和三星相机崩溃...
刚刚想起来前几天面试的时候遇到的一个问题, 问题大概是这样的做拍照上传图片功能的时候,在三星手机上拍出的照片是旋转了90度的,应该如何解决这个问题.因为之前没有遇到过这种问题,当时我回答的是给图片做一 ...
手机端上传照片实现压缩、拖放、缩放、裁剪、合成拼图等功能
一.序如题,最近工作中遇到一个移动端用户上传照片,然后在线编辑,添加一些别的图片合成的功能,类似于超级简化版美图秀秀.总结了一下,大致操作包含上传图片,图片压缩.触摸拖动图片.放大/缩小.添加别的 ...
三星手机拍照,上传照片或者下载导致图片旋转90°的解决办法。
项目需求. 因为项目中需要对拍照之后的图片进行上传. (这也是一个简单的问题) 但是就是三星手机(三星note3),出现拍照之后照片旋转了九十度. 然后我们上传上去,然后通过其他手机请求url再次显示 ...
exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本）
exif.js解决ios手机上传照片后显示为旋转90度问题(兼容ios13.4 ) 问题描述: 在做手机移动端app时,发现iOS12.5.1版本(iphone6)上传照片出现顺时针旋转90问题,ip ...
android上传图片被旋转,input上传照片旋转解决办法
需求很简单:h5拍照上传照片,然后显示出来问题在:上传之后的图片在PC,IOS端均能正常显示,Android端显示的则是被旋转90度的. 直接上代码下面这个方法传入file对象,然后会去除掉照片中 ...
封装微信公众号上传照片方法
1.微信公众号上传照片方法 wxPic.js // 弹出提示消息的组件 import { Toast } from "vant"; // 微信JS-SDK文件,微信开发者官方有 i ...
微信小程序（上传照片功能、统计字数功能）
微信小程序仿淘宝申请界面中的"申请描述" 效果图:(上传照片功能.统计字数功能) .wxml : <view class="apply-describe" ...
计算机职称照图片,全国职称计算机报名如何上传照片。怎么提示你无需上传照片。可以直接进行报名呢...
全国职称计算机报名如何上传照片.怎么提示你无需上传照片.可以直接进行报名呢以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! ...

vant 上传照片压缩旋转

vant 上传照片压缩旋转相关推荐

最新文章

热门文章

vant 上传照片 压缩 旋转

vant 上传照片 压缩 旋转相关推荐

最新文章

热门文章

vant 上传照片压缩旋转

vant 上传照片压缩旋转相关推荐