手机端上传照片压缩功能canvas

手机上传照片拍摄的照片像素很高需要压缩后上传，移动端前端压缩照片的方法一般是用canvas，然后转换成base64或者blob，发送后台。

 <div class="img-btn1"><img class="img" src="@images/camore.png" alt v-if="imgShow1" /><img class="imgs" src alt id="newImage1" v-else /><input class="fileInpBtn" type="file" @change="showPicture1($event)" accept="image/*" multiple/></div>

压缩方法

  showPicture1(e) {if (e.target.files[0]) {this.imgShow1 = false;this.$vux.loading.show({text: "验证中..."});// 获取上传文件的路径，并赋给img标签this.$nextTick(() => {document.getElementById("newImage1").src = window.URL.createObjectURL(e.target.files[0]);});// let formData = new FormData();// formData.append("file", e.target.files[0]); // 传文件// formData.append("cardSide", "FRONT");// formData.append('openid', getSStore('openid'));var file = e.target.files[0];let size2 = Math.floor(file.size / 1024);let that = this;if (size2 > 1024) {// 大于2M，进行压缩上传this.photoCompress(file, function(filebase) {var params = {file: filebase,cardSide: "FRONT"};that.uploadImg(params);});} else {var reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {var imgcode = reader.result;// 读取到的图片base64 数据编码 将此编码字符串传给后台即可var params = {file: imgcode.replace(new RegExp("\\+", "gm"), "%2B"),cardSide: "FRONT"};this.uploadImg(params);};}}},
photoCompress: function(file, callback) {var that = this;var ready = new FileReader();/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容. */ready.readAsDataURL(file);ready.onload = function() {var re = this.result;var img = new Image();img.src = re;img.onload = function() {var that = this;// 默认按比例压缩var w = 400;var h = (w * img.height) / img.width;var quality = 0.7; // 默认图片质量为0.7// 生成canvasvar canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");// 创建属性节点var anw = document.createAttribute("width");anw.nodeValue = w;var anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that, 0, 0, w, h);//也可以把压缩后的图片转blob格式用于上传// canvas.toBlob((blob)=>{//     console.log(blob)//     //把blob作为参数传给后端// }, 'image/jpeg', 0.92)// quality值越小，所绘制出的图像越模糊var base64 = canvas.toDataURL("image/jpg", quality);// 正则替换哈 imgData 为base64字符串base64.replace(/^data:image\/\w+;base64,/, "");// base64中，加号（+）是base64编码的一部分，如果将+号转变为空格，就会导致解密失败,所以要转换成%2b。var filebase = base64.replace(new RegExp("\\+", "gm"), "%2B");callback(filebase);// 回调函数返回的值};};},uploadImg(params) {this.$http.uploadPost("/fileManager/fileUploadOcr", params).then(res => {this.$vux.loading.hide();if (res.code === 0) {if (this.$route.query.action === "personalCenter") {this.$http.post("/customer/info", {}).then(response => {let identityNo = response.body.info.identityNo;if (identityNo !== res.body.IdNum) {this.$vux.alert.show("身份证信息不匹配，请重新上传！");this.clearData();this.imgShow1 = true;document.getElementById("newImage1").src = "";} else {this.identifyInfo.name = res.body.Name;this.identifyInfo.Sex = res.body.Sex;this.identifyInfo.Birth = res.body.Birth;this.identifyInfo.IdNum = res.body.IdNum;}});} else {this.identifyInfo.name = res.body.Name;this.identifyInfo.Sex = res.body.Sex;this.identifyInfo.Birth = res.body.Birth;this.identifyInfo.IdNum = res.body.IdNum;}} else {this.clearData();this.imgShow1 = true;document.getElementById("newImage1").src = "";}}).catch(res => {this.clearData();this.imgShow1 = true;document.getElementById("newImage1").src = "";});},

参考网址：https://blog.csdn.net/huangpb123/article/details/80560980

手机端上传照片压缩功能canvas相关推荐

手机端上传照片实现压缩、拖放、缩放、裁剪、合成拼图等功能
一.序如题,最近工作中遇到一个移动端用户上传照片,然后在线编辑,添加一些别的图片合成的功能,类似于超级简化版美图秀秀.总结了一下,大致操作包含上传图片,图片压缩.触摸拖动图片.放大/缩小.添加别的 ...
手机端-上传头像并裁剪
<headrunat="server"><metahttp-equiv="Content-Type"content="text/ht ...
dz程序上传服务器的位置,dz手机端上传到远程服务器
dz手机端上传到远程服务器内容精选换一换需要准备一台Linux系统的物理服务器或虚拟机作为镜像制作服务器,即宿主机,并为宿主机安装Linux操作系统.以CentOS 7.3 64bit操作系统为 ...
php 实现图片上传并压缩功能
前段时间由于项目需要,要实现图片上传并且压缩生成缩略图的功能. 接口代码如下: $allowext = array ( 'png', 'jpg', 'jpeg', 'gif','mp4','doc') ...
vant 上传照片压缩旋转
html 代码 <label for='uploadOne' class='photo-main' ><div class="show"><div c ...
Android使用XUtils框架上传照片（一张或多张）和文本，server接收照片和文字（无乱码）...
Android上传图片,这里我使用了如今比較流行的XUtils框架.该框架能够实现文件上传.文件下载.图片缓存等等,有待研究. 以下是Android端上传的代码: xUtils.jar下载 Strin ...
移动端/手机端完成图片旋转压缩剪裁上传
本篇文章主要介绍移动端/手机端图片的旋转.压缩.剪裁.上传这个功能的实现已经好了几次方案流程了,对最终的方案流程进行简述实现功能的主要方法/思想 1.图片的选取主要是通过input实现 2.图片的 ...
微信小程序（上传照片功能、统计字数功能）
微信小程序仿淘宝申请界面中的"申请描述" 效果图:(上传照片功能.统计字数功能) .wxml : <view class="apply-describe" ...
5中打开safari_iOS13版Safari浏览器新功能上线：可调节上传照片大小
11月23日消息,据报道,配合iOS 13系统使用的Safari浏览器新增了许多人性化设定,可以根据用户的个人需求,有选择地进行使用,其中就包括可以调节上传照片大小的功能. 这项功能的使用十分便捷,用 ...

手机端上传照片压缩功能canvas

手机端上传照片压缩功能canvas相关推荐

最新文章

热门文章