VUE图片裁剪功能vue-img-cutter

VUE图片裁剪功能vue-img-cutter

前言：

演示地址

• 兼容IE9+,MSEdge,Chrome,Firefox
• 两种展现形式，行内或弹窗
• 可旋转、缩放图片
• 任意比例、大小裁剪
• 固定比例、大小裁剪
• 支持远程图片裁剪、跨域设置

一、安装

npm install vue-img-cutter --save-dev

二、使用

<template>
	<ImgCutter 	
	ref="imgCutterModal"
    :imgCropperPic="imgCropperPic"
    :crossOrigin="true"
    crossOriginHeader=""
    :rate="rates"
    toolBgc="none"
    :isModal="false"
    :showChooseBtn="false"
    :lockScroll="true"
    :boxWidth="375"
    :boxHeight="450"
    :cutWidth="375"
    @onPrintImg="onPrintImg">ImgCutter>
template>

<script>

import ImgCutter from 'vue-img-cutter'
export default {
	components: {
	    ImgCutter
	},
	data() {
	  return {
	      rates: '1:1',
	      imgCropperPic: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1547803398,3047886900&fm=26&gp=0.jpg',
	  };
	},
	methods: {
		// 预览
	    onPrintImg(e){
	    	console.log(e);
	    },
	}
}

script>

三、参数说明

属性名	作用	类型	必填	默认值
isModal	是否为弹窗模式	Boolean	否	true
showChooseBtn	是否显示选择图片按钮	Boolean	否	true
lockScroll	是否在Dialog出现时将body滚动锁定	Boolean	否	true
label	默认打开裁剪工具按钮的显示文字	String	否	选择图片
boxWidth	裁剪工具宽度	Number	否	800
boxHeight	裁剪工具高度	Number	否	400
cutWidth	默认裁剪宽度	Number	否	200
cutHeight	默认裁剪高度	Number	否	200
tool	是否显示工具栏	Boolean	否	true
toolBgc	工具栏背景色	String(例: “#fff”)	否	#fff
sizeChange	是否能够调整裁剪框大小	Boolean	否	true
moveAble	能否调整裁剪区域位置	Boolean	否	true
originalGraph	是否直接裁剪原图	Boolean	否	false
crossOrigin	是否设置跨域，需要服务器做相应更改	Boolean	否	false
crossOriginHeader	设置跨域信息crossOrigin为true时才生效	String	否 ‘’
rate	图片比例	String(例: “4:3”)	否	-
WatermarkText	水印文字	String	否	‘’
WatermarkTextFont	水印文字字体	String	否	‘12px Sans-serif’
WatermarkTextColor	水印文字颜色	String	否	‘#fff’
WatermarkTextX	水印文字水平位置	Number	否	0.95
WatermarkTextY	水印文字垂直位置	Number	否	0.95
smallToUpload	如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件	Boolean	否	false
saveCutPosition	是否保存上一次裁剪位置及大小	Boolean	否	false
scaleAble	是否允许滚轮缩放图片	Boolean	否	true
index	自定义参数，将会同结果一起返回	Any	否	null
previewMode	裁剪过程中是否返回裁剪结果，如果裁剪出现卡顿时将此项设置为false	Boolean	否	true

四、钩子函数

属性名	作用	类型	必填	默认值
cutDown	完成截图后要执行的方法	Function	是	Object
error	错误回调	Function	否	Error object
onChooseImg	选择图片后	Function	否	Object
onPrintImg	在画布上绘制图片	Function	否	Object
onClearAll	清空画布	Function	否	null

五、返回值 @cutDown

属性名	类型
fileName	文件名
file	file类型的文件对象（IE部分版本可能不会返回）
blob	blob类型的文件对象（IE部分版本可能不会返回）
dataURL	dataURL
index	Any