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 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
MVVM 双向绑定的实现代码
Jun 21 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
12 种使用Vue 的最佳做法
Mar 30 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调用JAVA的WebService简单实例
2014/03/11 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
javascript实现文字无缝滚动效果
2017/08/26 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
vue根据值给予不同class的实例
2018/09/29 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python爬虫超时的处理的实例
2018/12/19 Python
大学同学聚会邀请函
2014/01/19 职场文书
室内趣味活动方案
2014/08/24 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
小学生通知书评语
2014/12/31 职场文书
家长会开场白和结束语
2015/05/29 职场文书
离职信范本
2015/06/23 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python