Vue图片裁剪组件实例代码


Posted in Vue.js onJuly 02, 2021

示例:

Vue图片裁剪组件实例代码

tip: 该组件基于vue-cropper二次封装

安装插件

npm install vue-cropper

yarn add vue-cropper

写入封装的组件

<!-- 简易图片裁剪组件 --- 二次封装 -->
<!-- 更多api https://github.com/xyxiao001/vue-cropper -->
<!-- 使用:传入图片 比例 显示隐藏。方法:监听底部按钮点击即可  ---更多props查询文档自行添加 -->

<template>
  <div v-if="value" :value="value" @input="val => $emit('input', val)" class="conbox">
    <div class="info">
      <vueCropper
        ref="cropper"
        :img="img"
        :outputSize="outputSize"
        :outputType="outputType"
        :info="info"
        :canScale="canScale"
        :autoCrop="autoCrop"
        :fixed="fixed"
        :fixedNumber="fixedNumber"
        :full="full"
        :fixedBox="fixedBox"
        :canMove="canMove"
        :canMoveBox="canMoveBox"
        :original="original"
        :centerBox="centerBox"
        :infoTrue="infoTrue"
        :mode="mode"
      ></vueCropper>
    </div>
    <div class="btns">
      <div @click="clickCancelCut" class="cancel">取消</div>
      <img @click="clickRotate" src="../../assets/paradise/rotate.png" alt="" />
      <div @click="clickOk" class="okey">确定</div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper';
export default {
  name: 'PictureCropping',
  components: { VueCropper },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    //裁剪图片的地址
    img: {
      type: String,
      default: '',
    },
    //截图框的宽高比例
    fixedNumber: {
      type: Array,
      default: () => {
        return [1, 1];
      },
    },
  },
  data() {
    return {
      // 裁剪组件的基础配置option
      //   img: this.img, // 裁剪图片的地址
      outputSize: 1, // 裁剪生成图片的质量
      outputType: 'jpeg', // 裁剪生成图片的格式
      info: true, // 裁剪框的大小信息
      canScale: true, // 图片是否允许滚轮缩放
      autoCrop: true, // 是否默认生成截图框
      // autoCropWidth: 300, // 默认生成截图框宽度
      // autoCropHeight: 200, // 默认生成截图框高度
      fixed: true, // 是否开启截图框宽高固定比例
      //   fixedNumber: this.fixedNumber, // 截图框的宽高比例
      full: true, // 是否输出原图比例的截图
      fixedBox: true, // 固定截图框大小 不允许改变
      canMove: true, //上传图片是否可以移动
      canMoveBox: true, // 截图框能否拖动
      original: false, // 上传图片按照原始比例渲染
      centerBox: true, // 截图框是否被限制在图片里面
      // high:true,// 是否按照设备的dpr 输出等比例图片
      infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      // maxImgSize: 2000, //限制图片最大宽度和高度
      // enlarge: 1, //图片根据截图框输出比例倍数
      mode: 'contain', //图片默认渲染方式
    };
  },
  computed: {},
  watch: {},
  //生命周期 - 创建完成(访问当前this实例)
  created() {},
  //生命周期 - 挂载完成(访问DOM元素)
  mounted() {},
  methods: {
    clickCancelCut() {
      this.$emit('clickCancelCut', '点击取消');
      this.$refs.cropper.stopCrop();
      this.$refs.cropper.clearCrop();
    },
    clickRotate() {
      this.$refs.cropper.rotateRight();
      this.$emit('clickRotate', '点击旋转');
    },
    clickOk() {
      //输出裁剪的base64
      this.$refs.cropper.getCropData(data => {
        this.$emit('clickOk', data);
        this.$refs.cropper.stopCrop();
        this.$refs.cropper.clearCrop();
      });
    },
  },
};
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.conbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .info {
    width: auto;
    height: 800px;
    .vue-cropper {
      background-image: none;
      background-color: #000;
    }
  }
  .btns {
    padding: 0 20px;

    color: #fff;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    img {
      width: 85px;
      height: 85px;
    }
    .cancel {
      background-color: #606465;
      padding: 15px 20px;
      width: 100px;
      border-radius: 10px;
    }
    .okey {
      background-color: #df6457;
      padding: 15px 20px;
      width: 100px;
      border-radius: 10px;
    }
  }
}
</style>

总结

到此这篇关于Vue图片裁剪组件的文章就介绍到这了,更多相关Vue图片裁剪组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue单元格多列合并的实现
Nov 26 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue 实现上传组件
May 31 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue3中provide && inject的使用
Jul 01 #Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 #Vue.js
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
Vue实现tab导航栏并支持左右滑动功能
Vue3.0写自定义指令的简单步骤记录
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
You might like
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
php实现计数器方法小结
2015/01/05 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
javascript克隆对象深度介绍
2012/11/20 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
javascript实现模拟时钟的方法
2015/05/13 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
python 实现兔子生兔子示例
2019/11/21 Python
python range实例用法分享
2020/02/06 Python
医学院校毕业生自荐信范文
2014/01/01 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
付款委托书范本
2014/10/05 职场文书
党支部书记岗位职责
2015/02/15 职场文书
酒店温馨提示语
2015/07/14 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
同学会演讲稿
2019/04/02 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL