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

在项目中用使用 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.使用组件时需要禁用页面的缩放功能。

问题反馈

资源所限并未进行各系统与多机型测试，感谢问题的反馈，我会尽力进行优化☺

请写明出现的问题（最好有录屏）与所用机型，谢谢。

• 邮箱: [email protected]