vue-img-cropper

vue-img-cropper是一个可以进行图片剪辑的插件，使用于vue
github地址：https://github.com/TonyXiang/vue-img-cropper

图片裁剪的基本原理

核心：借助canvas实现图片裁剪

处理思路

• 首先创建canvas对像。

• 指定canvas的高度宽度。

• 计算原图需要剪切的相关参数。

• 通过drawImage方法将需要的部分画上去。

• 通过toDataURL方法获取图片base64的值。

• 监听touch触摸方法，根据移动计算裁剪范围的变化，重新获取图片

关键方法

最主要的drawImage方法有一下传参方式：

• drawImage(img, dx, dy)

• drawImage(img, dx, dy, dw, dh)

• drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)

各参数说明：

• img：需要插入的img/video/canvas 元素。

• dx/dy：canvas的开始绘制点位。

  import vueImgCroppe from 'vue-cropper';
  Vue.use(vueImgCroppe);

• dw/dh：canvas的绘制区域大小。

• sx/sy：image的开始绘制点位。

• sw/wh：image的绘制区域大小。

安装

npm install vue-img-cropper -S

引入

main.js

import vueImgCroppe from 'vue-cropper';
Vue.use(vueImgCroppe);

参数

参数	说明	类型	默认值
height	可选，裁剪后图片的高度（单位px）	Number	500
width	可选，裁剪后图片的宽度（单位px）	Number	500
maxSize	可选，图片最大尺寸(单位：b)	Number	Number.MAX_VALUE
maxScale	可选，图片最大的放大倍数	Number	4
compressionRatio	可选，图片压缩比例，范围为：0～1	Number	0.92
footerHeight	可选，裁剪页面底部栏的高度（单位px）	Number	window.innerWidth * 0.1375
confirmBtnText	可选，底部栏确认按钮文案	String	'选取'
cancelBtnText	可选，底部栏取消按钮文案	String	'取消'

事件

事件名称	说明	回调参数
cutImg	确认裁剪时触发	base64格式的图片数据
oversize	图片体积超过maxSize时触发	Object: { fileSize, maxSize } ；(fileSize、maxSize为 Number 类型的数据，单位：b)
showLoading	加载时触发	--
hideLoading	加载完成后触发	--
showError	ErrorMsg, String	'***'

方法

名称	说明
getImg	打开相册／相机

getImg

该方法是通过使用input实现对相机/相册的调用

<form ref="fileForm" hidden>
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        hidden="hidden"
        @change="changeFun"
        id="myInput"
      />
</form>
<div @click="getImg">
      <slot></slot>
</div>

getImg() {
      this.$refs.fileInput.click();
},

Slot

名称	说明
（默认）	触发打开相机/相册的按钮

代码实例

<vue-img-cropper
    ref="cropper"
    :height="800"
    :width="800"
    :maxScale="3"
    :compressionRatio="0.8"
    @cutImg="showCutImg"
    @showLoading="showLoading"
    @hideLoading="hideLoading"
    @showError="showError"
>
    <div class="cut-btn">图片裁剪</div>
</vue-img-cropper>

// 也可以调用组件的 getImg 方法来打开相册／相机
this.$refs.cropper.getImg()