vue图片裁剪插件vue-cropper使用方法详解


Posted in Vue.js onDecember 16, 2020

本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法,供大家参考,具体内容如下

我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了。有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的,

vue图片裁剪插件vue-cropper使用方法详解

我这里采用了4:3的固定比例进行裁剪,裁剪后的效果

vue图片裁剪插件vue-cropper使用方法详解

但是裁剪后的图片路径是base64,超级长的路径,最终还是需要处理地址传给后端的,项目用oss处理图片,最终获得一个类似于aad68a8fd577464dbcdead2e9b20084d这个的后缀传给后端,base64的路径有几万几十万个字符,传给后端会炸的吧。

后来我通过oss进行处理,把base64的路径地址变成通过oss解析过的地址,但是!解析过的地址让我下载,下载的文件不是图片格式,记事本打开文件里面还是base64的路径,复制粘贴,没错,是裁剪之后的图片,这个问题暂时还没有解决,解决之后进行再回来修改。先附上代码吧。这里代码是比较全的,图片地址解析那一部分可以不用。

以上问题以解决,base64转成blob格式就可以处理了,oss上传需要使用new Blob格式(2019/6/22更新)

另外附上文档

裁剪的vue文件:(已更新)

先下载npm install vue-cropper --save

<!-- 裁剪图片 -->
<template>
 <div class="wrapper">
 <div class="model" v-show="model" @click="model = false">
  <div class="model-show">
  <img :src="modelSrc" alt="">
  </div>
 </div>
 <div class="content">
 
  <div class="show-info">
  <h2>自动生成截图框 固定比例 w : h => 4 : 3</h2>
  <div class="test">
   <vueCropper ref="cropper2" :img="example2.img " :outputSize="example2.size" :outputType="example2.outputType"
   :info="example2.info" :canScale="example2.canScale" :autoCrop="example2.autoCrop"
   :autoCropWidth="example2.autoCropWidth" :autoCropHeight="example2.autoCropHeight" :fixed="example2.fixed"
   :fixedNumber="example2.fixedNumber" :enlarge="4"></vueCropper>
  </div>
  <label class="btn" for="upload2">上传</label>
  <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);"
   accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event,2)">
  <button @click="finish2()" class="btn">裁剪</button>
  </div>
 </div>
 
 </div>
</template>
 
<script>
 import { VueCropper } from 'vue-cropper'
 import * as OSS from 'ali-oss';
 export default {
 components: {
  VueCropper,
 },
 data() {
  return {
  model: false,
  modelSrc: '',
  crap: false,
  previews: {},
  form: {
   head: ''
  },
  example2: {
   //img的路径自行修改
   img: '$oss.url + \'/\' + form.head ',
   info: true,
   size: 1,
   outputType: 'jpeg',
   canScale: true,
   autoCrop: true,
   // 只有自动截图开启 宽度高度才生效
   autoCropWidth: 300,
   autoCropHeight: 250,
   fixed: true,
   // 真实的输出宽高
   infoTrue: true,
   fixedNumber: [4, 3]
  },
  downImg: '#'
  }
 },
 methods: {
  //点击裁剪,这一步是可以拿到处理后的地址
  finish2() {
  this.$refs.cropper2.getCropData((data) => {
   this.modelSrc = data
   this.model = false;
   //裁剪后的图片显示
   this.example2.img = this.modelSrc;
   // this.toBlob(data)
   // console.log(data)
   // console.log(this.toBlob(data))
 
   //阿里云处理图片,项目的接口,这里可以不用,上面的地址打印即为base64的地址
   this.$api.admin.url(data => {
   new OSS.Wrapper({
    region: "oss-cn-hangzhou",
    accessKeyId: data.accessKeyId,
    accessKeySecret: data.accessKeySecret,
    stsToken: data.securityToken,
    // bucket: 'mybg'c
    bucket: 'zhiyuan-hz'
   })
    .put(data.key, this.toBlob(this.example2.img))
    .then(data => {
    console.log(data.url)
    })
    .catch(function (err) {
    console.error("error: %j", err);
    });
   });
  })
 
  },
 
  uploadImg(e, num) {
  //上传图片
  this.example2.img = ''
  var file = e.target.files[0]
  if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
   alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
   return false
  }
  var reader = new FileReader()
  reader.onload = (e) => {
   let data
   data = e.target.result
   if (typeof e.target.result === 'object') {
   // 把Array Buffer转化为blob 如果是base64不需要
   data = window.URL.createObjectURL(new Blob([e.target.result]))
   } else {
   data = e.target.result
   }
   if (num === 1) {
   this.option.img = data
   } else if (num === 2) {
   this.example2.img = data
   }
  }
  // 转化为base64
  // reader.readAsDataURL(file)
  // 转化为blobcs
  reader.readAsArrayBuffer(file)
  },
  // base64转blob
  toBlob(ndata) {
  //ndata为base64格式地址
  console.log(ndata)
  let arr = ndata.split(','),
   mime = arr[0].match(/:(.*?);/)[1],
   bstr = atob(arr[1]),
   n = bstr.length,
   u8arr = new Uint8Array(n);
  while (n--) {
   u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
   type: mime
  })
  }
 },
 
 }
</script>
 
<style>
 * {
 margin: 0;
 padding: 0;
 }
 
 .content {
 margin: auto;
 max-width: 585px;
 margin-bottom: 100px;
 }
 
 .test-button {
 display: flex;
 flex-wrap: wrap;
 }
 
 .btn {
 display: inline-block;
 line-height: 1;
 white-space: nowrap;
 cursor: pointer;
 background: #fff;
 border: 1px solid #c0ccda;
 color: #1f2d3d;
 text-align: center;
 box-sizing: border-box;
 outline: none;
 margin: 20px 10px 0px 0px;
 padding: 9px 15px;
 font-size: 14px;
 border-radius: 4px;
 color: #fff;
 background-color: #50bfff;
 border-color: #50bfff;
 transition: all .2s ease;
 text-decoration: none;
 user-select: none;
 }
 
 .des {
 line-height: 30px;
 }
 
 code.language-html {
 padding: 10px 20px;
 margin: 10px 0px;
 display: block;
 background-color: #333;
 color: #fff;
 overflow-x: auto;
 font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
 border-radius: 5px;
 white-space: pre;
 }
 
 .show-info {
 margin-bottom: 50px;
 }
 
 .show-info h2 {
 line-height: 50px;
 }
 
 /*.title, .title:hover, .title-focus, .title:visited {
  color: black;
 }*/
 
 .title {
 display: block;
 text-decoration: none;
 text-align: center;
 line-height: 1.5;
 margin: 20px 0px;
 background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
 color: transparent;
 -webkit-background-clip: text;
 background-size: 200% 100%;
 animation: slide 5s infinite linear;
 font-size: 40px;
 }
 
 .test {
 height: 285px;
 }
 
 .model {
 position: fixed;
 z-index: 10;
 width: 100vw;
 height: 100vh;
 overflow: auto;
 top: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.8);
 }
 
 .model-show {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100vw;
 height: 100vh;
 }
 
 .model img {
 display: block;
 margin: auto;
 max-width: 80%;
 user-select: none;
 background-position: 0px 0px, 10px 10px;
 background-size: 20px 20px;
 background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
 }
 
 .c-item {
 display: block;
 padding: 10px 0;
 user-select: none;
 }
 
 @keyframes slide {
 0% {
  background-position: 0 0;
 }
 
 100% {
  background-position: -100% 0;
 }
 }
 
 @media screen and (max-width: 1000px) {
 .content {
  max-width: 90%;
  margin: auto;
 }
 
 .test {
  height: 400px;
 }
 }
</style>

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

Vue.js 相关文章推荐
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
vue实现图片裁剪后上传
Dec 16 #Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 #Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 #Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 #Vue.js
8个非常实用的Vue自定义指令
Dec 15 #Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 #Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 #Vue.js
You might like
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Django中处理出错页面的方法
2015/07/15 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
珍珠奶茶店创业计划书
2014/01/11 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
社会实践活动总结格式
2015/05/11 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
以下牛机,你有几个
2022/04/05 无线电