代码拉取完成,页面将自动刷新
cutphoto是一个简单易用的切图工具,没有条条框框,全部自定义
目前项目依赖 zrender, hammer, lrz
git@osc 的pages有点问题,可以通过
npm run docs:view
查看文档 文档
// 使用
const cutphoto = new Cutphoto({
image: { img: img.src },
container: document.querySelector('#cutphoto'),
mask: {
img:this.$refs.backbg.src,
size: [230, 160],
opacity:0.98
},
output: {
size: [230, 160],
},
})
// 调整好图片位置大小后调用done即可获取新图片的base64
const base64=cutphoto.done().base64
// 可以通过调用preview方法进行预览,size设置越大越影响性能,预览不影响输出大小,尽量小
cutphoto.preview([125,80],data => {
const src = data.base64
// ...do something
})
// 接收参数如下
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?: (output: Output) => any
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。