cutphoto
cutphoto是一个简单易用的切图工具,没有条条框框,全部自定义
目前项目依赖 zrender, hammer, lrz
DEMO
文档详细说明
git@osc 的pages有点问题,可以通过
npm run docs:view
查看文档 文档
使用
// 使用const cutphoto = image: img: imgsrc container: document mask: img:this$refsbackbgsrc size: 230 160 opacity:098 output: size: 230 160 // 调整好图片位置大小后调用done即可获取新图片的base64const base64=cutphotobase64 // 可以通过调用preview方法进行预览,size设置越大越影响性能,预览不影响输出大小,尽量小cutphoto
参数
// 接收参数如下interface Option /** * @description: 容器 */ container?: HTMLElement /** * @description: 待处理原始图片 */ image: /** * @description: 图片对象 */ img: Img /** * @description: 最大缩放 */ maxZoom?: number /** * @description: 最小缩放 */ minZoom?: number /** * @description: 初始化时进行压缩,压缩后的宽高与质量 */ lrz?: /** * @description: 图片大小 */ size?: Size /** * @description: 图片质量 */ quality?: number /** * @description: 遮罩背景图 */ mask?: /** * @description: 遮罩层图片透明度 */ opacity?: number /** * @description: 遮罩层图片 */ img?: string /** * @description: 遮罩层大小 */ size?: Size /** * @description: 遮罩层位置 */ position?: Point // // 是否支持调节 // resize?: boolean // // 固定比例 // ratio?: boolean /** * @description: 输出参数 */ output?: /** * @description: 输出图片size */ size?: Size /** * @description: 输出图片质量 */ quality?: number /** * @description: 输出类型 */ type?: string /** * @description: 预览设置 */ preview?: /** * @description: 预览大小 */ size?: Size /** * @description: 预览回调函数 */ callback?: any