cutphoto
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

cutphoto

cutphoto是一个简单易用的切图工具,没有条条框框,全部自定义

目前项目依赖 zrender, hammer, lrz

DEMO

DEMO

文档详细说明

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
  }
}
 

Readme

Keywords

Package Sidebar

Install

npm i cutphoto

Weekly Downloads

0

Version

1.0.1

License

ISC

Unpacked Size

86.6 kB

Total Files

23

Last publish

Collaborators

  • arcoon