h5-image-editor

基于 canvas 的图片编辑. online demo

Install

    npm install h5-image-editor
    # or
    yarn add h5-image-editor

    # development
    npm run start
    # build
    npm run build

Usage

<div style="width:300px;height:300px" id="container"></div>;
var container = document.getElementById("container");
new Editor.default({
  root: container, // root dom container
  color: "#000", // draw color
  lineWidth: 8, // draw line width
  openSmooth: false, // if enable brush thickness effect
  center: true, // if entered canvas in container
  rotate: 0, // export rotated image, available values: -90/90/-180/180
  minWidth: 2, // minimize linWidth
  minSpeed: 1.5, // minimize brush move speed
  scaleRatio: window.devicePixelRatio, // canvas scale ratio
  resizeRatio: 1 / window.devicePixelRatio, // resize canvas ratio
  scaleable: true, // canvas can pinch scaleable
  maxScale: 5, // max scacle by pinch
  maxWidth: window.innerWidth, // canvas element style max width
  maxWidthDiffRate: 20, // Smooth transition threshold
  maxHistoryLength: 0, // max history length, no limit if set to 0
  undoRedoStateChange: Function, // state change callback if undo/redo state changed
  onDrawStart: Function, // called when draw starts, [MouseEvent, point]
  onDrawing: Function, // called when draw going , [MouseEvent, point]
  onDrawUp: Function, // called when draw up , [MouseEvent, Image]
});

instance methods

setLineWidth

parameters: width [number]

set draw lineWidth dynamic

setColor

parameters: color [string]

set draw color dynamic

setOptions

parameters: options Object

set override options, all properties same as constructor parameters, see above

clear

clear the canvas

undo

go prev draw stage

redo

go next draw stage

canUndo

query if can undo

canRedo

query if can redo

restore

parameters: [rotate] boolean

reset translate、scale and origin

setScale

parameters: scale number

set scale manually

getResult

get the cropped or origin canvas dom

destroy

destroy the instance