Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

cutterjs

jiangxueyang3MIT1.0.5

javascript cutterjs cropperjs image tool

image, cutterjs, cropper, cropper-js, png, jpg, html, javascript, canvas

readme

Installation

CLI

npm install cutterjs -S

Browser

<script src="https://unpkg.com/cutterjs@1.0.5/dist/cutterjs.min.js"></script>

Quick Start

// init
let cutter = new Cutter({
    imageSrc: './images/bg.jpeg',
    containerEl: '.wrap',
    scalable: false,
    zoomable: false,
    rotatable: false,
    cutBoxResizable: false,
    scaleEl: '#scale',
    zoomEl: '#zoom',
    cutEl: '#cut',
    rotateEl: '#rotate',
    outputType: 'jpeg',
    onRender() {
        console.log('渲染成功')
    },
    onScale(config) {
        console.log(config, 'has scaled')
    },
    onZoom(config) {
        console.log(config, 'has zoomed')
    },
    onCut(url) {
        console.log(url, 'image base64 url')
        document.querySelector('#image').src = url
    }
})

// get cropped image's base64 url
let imagUrl = cutter.cutImage()

Params

Param Type required Default Notes
imageSrc String true '' A image's source that will be cropped.
containerEl String true '' A area that operate cropping a image. It can be a class name or a id.
scalable Boolean false true If true, the image can be scaled.
zoomable Boolean false true If true, the image can be zoomed.
ratatable Boolean false true If true, the image can be rotated.
cutBoxResizable Boolean false true If true, the size of the cropped image can be resized.
scaleEl String false '' A dom that can trigger scaling the image.If the value of scalable is true, it is required. It can be a class name or a id.
zoomEl String false '' A dom that can trigger zooming the image.If the value of zoomable is true, it is required. It can be a class name or a id.
rotateEl String false '' A dom that can trigger rotating the image.If the value of ratatable is true, it is required. It can be a class name or a id.
cutEl String false '' A dom that can trigger cropping the image. It can be a class name or a id.
minCutWidth Number false 16 The minimum width of the cropped image's size.
cutWidth Number false 200 The width of the cropped image's It must be bigger than the value of minCutWidth.
minCutHeight Number false 16 The minimum height of the cropped image's size.
cutHeight Number false 200 The heigth of the cropped image's size. It must be bigger than the value of minCutHeight.
maxScaleRatio Number false 3 The maximum scale ratio of the image.
maxZoomRatio Number false 3 The maximum zoom ratio of the image.
outputType String false png The cropped image's type, png or jpeg.
onRender Function false null The callback after rendering successfully.
onCut Function false null The callback after cropping. It will return base64 url of the cropped image.
onScale Function false null The callback after scaling. It will return all config.
onZoom Function false null The callback after zooming. It will return all config.

Methods

  • cutImage(imageUrl) cut the image and get the image's base64 url
      let cutter = new Cutter(
      ...
  )
  let imageUrl = cutter.cutImage()