@yanglinlin/js_cropper
v1.1.3
Published
use html5 canvas to cropper imgage and compress it
Downloads
6
Readme
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及以下，input[type=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，更新完成
实例方法
- cut，获取裁剪框选中部分图片并返回base64图片
- update，更新裁剪参数，并重绘裁剪画布
- reset，重置裁剪框位置在裁剪画布中间
- destory，销毁裁剪实例 以上方法只有update方法有参数，参数是Object类型，可包含属性为 ### 参数 ### 中包含的属性