Vue-image-cutting NPM

VueImageCutting

基于vue.js的图片裁剪组件

安装

npm i vue-image-cutting

使用

在 main.js 文件中引入插件并注册

// main.js
import VueImageCutting from 'vue-image-cutting'
import 'vue-image-cutting/lib/VueImageCutting.css'
Vue.use(VueImageCutting)

参数

参数	说明	类型	是否必填	默认值
picturePath	需要裁剪的图片路径与文件	File,Blob,String	是	-
crossDomain	是否通过img标签的crossorigin属性请求跨域资源	Boolean	否	false
buttonColor	确认按钮的背景色	String	否	#0e9a00
backgroundColor	背景色	String	否	#000000
iconColor	旋转与复原按钮颜色	String	否	#ffffff
format	裁剪完成后图片Base64的格式	String	否	png
maskOpacity	上层蒙版透明度	String	否	0.7
minZoom	允许缩小的最小倍数	Number	否	0.5
maxZoom	允许放大的最大倍数	Number	否	3

注意
1. 参数format传入的值将使用在canvas.toDataURL()中，如果传入的类型非“png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
2. maskOpacity传入的数字大小应在0至1之间。
3. minZoom不得小于等于0或大于5。
4. maxZoom不得小于等于1或大于5。
5. 受浏览器同源策略限制，如需使用跨域图片资源，会污染canvas导致不能使用canvas.toDataURL()方法进行截取，问题的解决方法是请将crossDomain的值设置为true（这样会将crossorigin="Anonymous"属性添加进img标签中），同时在被请求的资源文件中添加 'Access-Control-Allow-Origin’。
事件
事件名称说明回调参数
confirm 点击确认按钮时触发,返回裁剪后的base64 base64
cancel 点击取消时触发 -
rotate 点击旋转时触发，得到当前旋转角度 angle
restore 点击复原时触发，得到当前旋转角度 angle
loading 图片加载结束后触发，成功LoadingStatus:true，失败LoadingStatus:false LoadingStatus
touching 图片移动与缩放时触发，得到当前图片的（旋转角度，缩放比，高度，宽度，x轴距离，Y轴距离） angle，scale，height，width，x，y

事件名称	说明	回调参数
confirm	点击确认按钮时触发,返回裁剪后的base64	base64
cancel	点击取消时触发	-
rotate	点击旋转时触发，得到当前旋转角度	angle
restore	点击复原时触发，得到当前旋转角度	angle
loading	图片加载结束后触发，成功LoadingStatus:true，失败LoadingStatus:false	LoadingStatus
touching	图片移动与缩放时触发，得到当前图片的（旋转角度，缩放比，高度，宽度，x轴距离，Y轴距离）	angle，scale，height，width，x，y

在项目中用使用 VueImageCutting

<template>
  <div>
    <Vue-imageCutting
        :picturePath="picturePathData" <!--必填-->
        :buttonColor="buttonColorData" <!--选填-->
        :backgroundColor="backgroundColorData" <!--选填-->
        :iconColor="iconColorData" <!--选填-->
        :format="formatData" <!--选填-->
        :crossDomain="crossDomainData" <!--选填-->
        :maskOpacity="maskOpacityData" <!--选填-->
        :minZoom="minZoomData" <!--选填-->
        :maxZoom="maxZoomData" <!--选填-->
        @confirm="confirmMethod" <!--选填-->
        @cancel="cancelMethod" <!--选填-->
        @rotate="rotateMethod" <!--选填-->
        @restore="restoreMethod" <!--选填-->
        @loading="loadingMethod" <!--选填-->
        @touching="touchingMethod" <!--选填-->
    />
  </div>
</template>
<script>
  export default {
    data () {
      return {
        maskOpacityData:0.7,
        formatData:"jpeg",
        minZoomData:0.5,
        crossDomainData:false,
        maxZoomData:3,
        iconColorData:"#ffffff",
        backgroundColorData:'#000000',
        buttonColorData:'#0e9a00',
        picturePathData:"xxx.jpg"
      }
    },
    methods:{
        touchingMethod(event){
            console.log(event)
        },
        restoreMethod(event){
            console.log(event)
        },
        rotateMethod(event){
            console.log(event)
        },
        cancelMethod(event){
            console.log(event)
        },
        loadingMethod(event){
            console.log(event)
        },
        confirmMethod(event){
            console.log(event)
        }
    }
  }
</script>

注意：标签为 <Vue-imageCutting>

使用时请注意
1.本组件只适用于手机端，使用时组件自动铺满全屏，但也要尽量确保，组件的父级标签铺满全屏，否则有可能会影响组件获取手势x轴y轴坐标错误，导致不能正常使用。
2.组件内支持传入base64字符串，图片地址，或数据类型为File,Blob的图片文件。
3.使用组件时需要禁用页面的缩放功能。