基于vue的图片裁剪vue-pic-clip

最新推荐文章于 2023-01-30 11:22:09 发布

置顶奘倥城

最新推荐文章于 2023-01-30 11:22:09 发布

阅读量493

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45178761/article/details/106235796

版权

vue.js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-pic-clip进行图片裁剪。首先，在main.js中安装并引入组件，然后在具体组件内进行配置和使用，实现图片的裁剪功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：安装

npm install vue-pic-clip

2：使用

main.js里面

import VueClip from 'vue-pic-clip'
Vue.use(VueClip)

3：组件内

//图片上传
<template>
        <vue-clip style="height:160px;width: 120px;"
          :accept="option.accept"
          v-model="option.img"
          :autoClip="option.autoClip"
          :autoClipWidth="option.autoClipWidth"
          :autoClipHeight="option.autoClipHeight"
          :fixed="option.fixed"
          :canMoveBox="option.canMoveBox"
          :fixedNumber="option.fixedNumber"
          :outputSize="option.outputSize" 
          @finish="this.finish">上传照片</vue-clip>
</template>

<script>
    export default {
      data() {
        return {
          option: {
            accept: 'image/jpeg, image/jpg', // 可上传的图片类型
            img: '', // 裁剪图片的地址
            imageCertId:'',
            info: true, // 裁剪框的大小信息
            autoClip: true, // 是否开启截图框
            outputSize: 0.8, // 裁剪生成图片的质量
            outputType: 'jpeg', // 裁剪生成图片的格式
            canScale: false, // 图片是否允许滚轮缩放
            autoCrop: true, // 是否默认生成截图框
            autoClipWidth: 120, // 截图框宽度
            autoClipHeight: 160, // 截图框高度
            fixedBox: true, // 固定截图框大小 不允许改变
            // fixed: true, // 是否开启截图框宽高固定比例
            fixedNumber: [1, 1],
            full: true, // 是否输出原图比例的截图
            canMoveBox: false, // 截图框能否拖动
            original: false, // 上传图片按照原始比例渲染
            centerBox: false, // 截图框是否被限制在图片里面
            infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          },
        }
      },
      mounted() {

      },
      methods: {
        finish (name, file) {
          const isLt200K = file.size <(1024*100);
          if (!isLt200K) {
            this.$message.error('上传图片大小不能超过 100K!');
            return;
          }
        }
      }
    }
</script>

<style scoped>

</style>