使用cropper插件实现图片的裁剪和预览

Posted 别Null.了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用cropper插件实现图片的裁剪和预览相关的知识,希望对你有一定的参考价值。

安装cropperjs插件

npm install cropperjs

裁剪框以及图片的一些设置说明

ViewMode 视图控制

取值:

  • 0 无限制,裁剪框可以移动到图片外,预览时图片外的地方用黑色填充
  • 1 限制裁剪框只能在图片范围内移动      
  • 2 限制裁剪框不能超出图片的范围,且图片不全部占满后面的网格背景
  • 3 限制裁剪框不能超出图片的范围,且图片占满后面全部网格背景(短的那边填充)

dragMode 拖拽图片模式

取值:

  • crop 形成新的裁剪框
  • move 图片可移动
  • none 什么也没有

实现图片的裁剪以及预览

<template>
  <div id="box">
    <button @click="sureSave">裁剪</button>
    <div class="box">
      <div class="box_1">
        <img src="./cropper.jpeg" ref="image" style="width:300px;height:300px"/>
      </div>
      <!-- 裁剪完的图片 -->
      <p>裁剪后的图片为:</p>
      <div class="cropper">
        <img :src="afterImg" />
      </div>
    </div>
  </div>
</template>

<script>
import  defineComponent, onMounted, reactive, toRefs  from 'vue'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default defineComponent(
  setup () 
    const data = reactive(
      afterImg: '',
      image: null,
      myCropper: null
    )
    onMounted(() => 
      data.myCropper = new Cropper(data.image, 
        viewMode: 0, // 设置裁剪框可以超出图片范围
        dragMode: 'move', // 设置被裁剪的图片可移动
        backgrounde: true, // 是否显示图片后的网格背景
        preview: '.before', // 进行图片预览效果
        autoCropArea: 0.8, // 设置裁剪区域占图片的大小,值为0-1,0.8表示占80%区域
        zoomOnWheel: true, // 设置图片是否可以进行收缩功能
        center: true // 是否显示中间的 + 箭头
      )
    )
    const sureSave = () => 
      // 裁剪后的图片
      data.afterImg = data.myCropper.getCroppedCanvas(
        imageSmoothingQuality: 'high'
      ).toDataURL('image/jpeg') // 设置图片格式
    
    return 
      // data,
      sureSave,
      // toRefs()函数可以将reactive()创建出来的响应式对象转换为普通对象,只不过这个普通对象上的每一个属性都是响应式的
      ...toRefs(data)
    
  

)
</script>

实现结果

以上是关于使用cropper插件实现图片的裁剪和预览的主要内容,如果未能解决你的问题,请参考以下文章

使用cropper插件实现图片的裁剪和预览

jQuery插件分享Cropper——一个简单方便的图片裁剪插件

jQuery插件使用cropper实现简单的头像裁剪并上传

cropper动态裁剪图片(极简)

cropper动态裁剪图片(极简)

cropper.js图片裁剪