Vue.js 2.0 移动端拍照压缩图片预览及上传实例


Posted in Javascript onApril 27, 2017

在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的。但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现。

首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上传这个流程。每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResizeIMG , 这个插件的使用说明可以去看wiki,基本原理是通过canvas渲染图片,再通过 toDataURL 方法压缩保存为base64字符串(能够编译为jpg格式的图片),压缩效果很不错,ios拍照2MB多压缩下来大概是60-80kb左右,失真不是太严重,但是对我的项目来说图片清晰可见就好,我贴的代码里面也会有使用的演示。

<template>
 <h5 class="content-header">图片列表</h5>
 <div class="image-list">
 <div class="list-default-img" v-show="isPhoto" @click.stop="addPic">
  <img src="./images/icon_photo.png" />
  <span>请选择或者拍照上传照片</span>
  <input type="file" accept="image/jpeg,image/jpg,image/png" capture="camera" @change="onFileChange" style="display: none;">
 </div>
 <ul class="list-ul" v-show="!isPhoto">
  <li class="list-li" v-for="(iu, index) in imgUrls">
  <a class="list-link" @click='previewImage(iu)'>
   <img :src="iu">
  </a>
  <span class="list-img-close" @click='delImage(index)'></span>
  </li>
  <li class="list-li-add">
  <span class="add-img" @click.stop="addPic"></span>
  </li>
 </ul>
 </div>
  <div class="add-preview" v-show="isPreview" @click="closePreview">
 <img :src="previewImg">
 </div>
 
</template>

<script>

 export default {
 data: function () {
  return {
  imgUrls: [],
  urlArr: [],
  isPhoto: true,
  btnTitle: '',
  isModify: false,
  previewImg:'',
  isPreview: false
  }
 },
 watch: {
  imgUrls: 'toggleAddPic'
 },
 methods: {
  toggleAddPic: function() {
  let vm = this;
  if(vm.imgUrls.length >= 1) {
   vm.isPhoto = false;
  } else {
   vm.isPhoto = true;
  }
  },
  addPic: function(e) {
  let vm = this;
  $('input[type=file]').trigger('click');
  return false;
  },
  onFileChange: function(e) {
  var files = e.target.files || e.dataTransfer.files;
  if(!files.length) return;
  this.createImage(files, e);
  },
  createImage: function(file, e) {
  let vm = this;
  lrz(file[0], { width: 480 }).then(function(rst) {
   vm.imgUrls.push(rst.base64);
   return rst;
  }).always(function() {
  // 清空文件上传控件的值
  e.target.value = null;
  });
  },
  delImage: function(index) {
  let vm = this;
  let btnArray = ['取消', '确定'];
  mui.confirm('确定删除该图片?','提示', btnArray, function(e) {
   if (e.index == 1) {
   vm.imgUrls.splice(index, 1);
   }
  })

  },
  previewImage: function(url){
  let vm = this;
  vm.isPreview = true;
  vm.previewImg = url;
  },
  closePreview: function(){
  let vm = this;
  vm.isPreview = false;
  vm.previewImg = "";
  },
  saveImage: function(){
  let vm = this;
  let urlArr = [],
  imgUrls = this.imgUrls;

  for(let i = 0; i < imgUrls.length; i++) {
   if(imgUrls[i].indexOf('file') == -1) {
   urlArr.push(imgUrls[i].split(',')[1]);
   } else {
   urlArr.push(imgUrls[i]);
   }
  }

  //数据传输操作
  }
 }
 }
 
</script>

1.点击拍照或选择图片 addPic

在vue.js中出发拍照和选择图片是频繁操作行为,每次只能拍照或选择一张图片,可以拍多张上传,使用给click事件加上.stop的修饰符,.stop - 调用 event.stopPropagation() ,是为了停止冒泡。accept是为了规定通过文件上传来提交的文件的类型,capture是webApp中捕获到系统默认的设备,camera--照相机;camcorder--摄像机;microphone--录音。

Vue.js 2.0 移动端拍照压缩图片预览及上传实例   

在触发拍照行为的时候绑定change事件 onFileChange 获取file文件对象,然后调用lrz方法压缩图片,在imgUrls数组中添加基于base64格式的图片。

lrz(file[0], { width: 480 }).then(function(rst) {
   vm.imgUrls.push(rst.base64);
   return rst;
  }).always(function() {
  // 清空文件上传控件的值
  e.target.value = null;
  });
lrz(file, [options]);

file: 通过 input:file 得到的文件,或者直接传入图片路径。

[options] :这个参数允许忽略。

  1.     width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度;
  2.     height {Number} 同上;
  3.     quality {Number} 图片压缩质量,取值 0 - 1,默认为0.7;
  4.     fieldName {String} 后端接收的字段名,默认:file;

返回结果是一个promise对象,有then()、catch()、always三个方法。

then(rst):

  1.     rst.formData 后端可处理的数据;
  2.     rst.file 压缩后的file对象(默认已经丢在rst.formData有一份了),需要注意的是如果压缩率太低的话,这个会是原始的file对象;
  3.     rst.fileLen 生成后的图片的大小,后端可以通过此值来校验是否传输完整;
  4.     rst.base64 生成后的图片base64,后端可以处理此字符串为图片,也直接用于img.src = base64;
  5.     rst.base64Len 生成后的base64的大小,后端可以通过此值来校验是否传输完整 (如果采用base64上传方式);
  6.     rst.origin 也就是原始的file对象,里面存了一些原始文件的信息,例如大小,日期等;

catch(err) 、always() 。

注意:由于我们可能持续点击拍照上传图片,使用在alway回调函数里面必须清空上传控制的值。

// 清空文件上传控件的值
 e.target.value = null;

2. 点击拍第一张照片和显示预览以及继续拍照的DOM显示  isPhoto

   默认 isPhoto 为true,隐藏继续拍照的DOM显示,toggleAddPic 监听当前选中imgUrls数组长度,转换 isPhoto 的布尔值若有一张及以上的图片设置 isPhoto 为false, 则隐藏点击拍第一张照片DOM,显示继续拍照的DOM;若没有图片,则隐藏继续拍照的DOM,显示击拍第一张照片DOM。

3. 删除已选择的压缩图片 delImage

根据数组对应的下标,在imgUrls中删除对应的图片数据。

delImage: function(index) {
  let vm = this;
  let btnArray = ['取消', '确定'];
  mui.confirm('确定删除该图片?','提示', btnArray, function(e) {
   if (e.index == 1) {
   vm.imgUrls.splice(index, 1);
   }
  })

  }

Vue.js 2.0 移动端拍照压缩图片预览及上传实例

4. 大图预览已经被压缩的图片及关闭大图预览  isPreview previewImage closePreview

在这里大图预览就是将base64格式的图片直接放进预览DOM的img src中放大展示,点击图片自身关闭预览,清空img src资源。

Vue.js 2.0 移动端拍照压缩图片预览及上传实例

5. 对base64图片传输前的处理 saveImage

saveImage: function(){
  let vm = this;
  let urlArr = [],
  imgUrls = this.imgUrls;

  for(let i = 0; i < imgUrls.length; i++) {
   if(imgUrls[i].indexOf('file') == -1) {
   urlArr.push(imgUrls[i].split(',')[1]);
   } else {
   urlArr.push(imgUrls[i]);
   }
  }

  //数据传输操作
  }

我压缩成base64字符串是“data:image/jpeg;base64,~~”的字符串,为了后端好处理,我这里为了将编辑时候后台返回的图片url区别开来,将“data:image/jpeg;base64,"截取掉,只传递给后端逗号后面的base64字符串。

注意:后端接收到我传递的base64字符串数组的时候,发现字符经如果被urlencode后标准的base64中的/、 +会被转成%xx,后端在将base64字符串处理成图片时,需要将特殊字符过滤掉。

[HttpPost]
    public ActionResult MUploadImgBase64Str(string base64str)
    {
      try
      {
        var imgData = base64str;
        //过滤特殊字符即可  
        string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
        if (dummyData.Length % 4 > 0)
        {
          dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
        }
        byte[] byteArray = Convert.FromBase64String(dummyData);
        using (System.IO.MemoryStream ms = new System.IO.MemoryStream(byteArray))
        {
          var img = System.Drawing.Image.FromStream(ms);

          var path = "~/Content/UploadFiles/mobile/";
          var uploadpath = Server.MapPath(path);
          if (!Directory.Exists(uploadpath))
          {
            Directory.CreateDirectory(uploadpath);
          }
          var saveName = uploadpath + “stoneniqiu” + ".jpg";
          img.Save(saveName);
          return Json(saveName);
        }
      }
      catch (Exception e)
      {
        return Json(e.Message);

      }
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
详解JavaScript执行模型
Nov 16 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 #Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 #Javascript
Vue实现购物车功能
Apr 27 #Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 #Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 #Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 #Javascript
微信小程序 wx:for的使用实例详解
Apr 27 #Javascript
You might like
php笔记之:AOP的应用
2013/04/24 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
xtree.js 代码
2007/03/13 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python可迭代对象去重实例
2020/05/15 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
2015年中学总务处工作总结
2015/07/22 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL