@yanglinlin/js_cropper NPM

js_cropper使用文档

js_cropper 是一款使用html5画布元素进行图片裁剪压缩的js框架

安装

1、script标签引入

<script src="../dist/JSCropper.js"></script>

2、npm安装

npm i @yanglinlin/js_cropper

使用

//使用示例：
var jc = new JSCropper({
		el: '#cropper',
		img: './images/pic1.jpg',
		debug: true
	});

参数

el，String或HTMLElement类型，如果el是画布元素或画布选择器，则在该画布上进行图片裁剪；如果el是普通的HTMLElement元素，则会在该节点内创建一个裁剪画布
cropperWidth，Number类型，默认：800，整个裁剪画布宽度
cropperHeight，Number类型，默认：600，整个裁剪画布高度
img，String或HTMLElement类型，要裁剪的图片地址或图片元素（IE9及以下，inputtype=file传入的图片无法在画布中绘制）
width，Number类型，默认：300，裁剪框宽度，即最终获取图片宽度
height，Number类型，默认：300，裁剪框高度，即最终获取图片高度
shadowColor，String类型，默认：rgba(0,0,0,0.7)，整个裁剪画布背景色
edgeLineColor，String类型，默认：#fff，裁剪框边线颜色
edgeLineWidth，Number类型，默认：3，裁剪框外框线宽
dashLineColor，String类型，默认：rgba(255,255,255,0.8)，裁剪框中间虚线颜色
quality，Number类型，默认：1，图片格式设置为imag/.jpg 时，设置最终获取的图片质量
imgType，String类型，默认：image/png，最终获取图片类型
inSelectBackColor，String类型，默认：rgba(0,0,0,0.6)，未拖拽裁剪框时，裁剪框外阴影颜色
selectBackColor，String类型，默认：rgba(0,0,0,0.4)，拖拽裁剪框时，裁剪框外阴影颜色
钩子函数：
beforeCreate，开始创建裁剪元素
created，裁剪元素已经绘制完成
beforeDestory，开始销毁
destoryed，销毁完成
onUpdate，更新完成