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 $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
ant design vue的form表单取值方法
Jun 01 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
多重?l件?合查?(二)
2006/10/09 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
Vue表单实例代码
2016/09/05 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
Python实现二分法算法实例
2015/02/02 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python循环结构的应用场景详解
2019/07/11 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python实现视频读取和转化图片
2019/12/10 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Python基于execjs运行js过程解析
2020/11/27 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
应届毕业生求职信
2013/11/30 职场文书
大学活动总结格式
2014/04/29 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python