laiye-canvas

A canvas polyfill library to adapt all environments.

• client: canvas
• bff: node-canvas
• mini program: Taro-canvas
• native: flutter canvas & react-native art

Feature

• touch event
• animation
• modern properties(shadow round opacity mask)
• 3D support

Update

2019.04.23

• drawImage现在返回base64，不再需要toDataURL
• 移除了drawCheckinImage
• 使用tslint替换了eslint
• 增加broswerslist

> 0.2% in CN,
last 2 versions,
not android < 4.4,
not ios < 9,
not dead,
not ie 11,
not op_mini all,
not ie_mob 11,
not baidu 7

2019.01.23

• drawImage 新的API，支持更通用的绘图方式
• drawLine 可以绘制线条
• pixelRatio 根据设备自动缩放绘图尺寸（base = 2）
• clipRect & adjustAngle
• fix eslint
• drawImage/clipRect returns catched promise

clipRect(base64: string, rotateDegree: number = 0): Promise<any>

drawImage(params: any): Promise<any>

Env

• Node v10.5
• Npm v6.1
• Yarn v1.7

Installation & run & build

yarn
npm run dev
npm run build

如果出现node-gyp rebuild error，请执行

$ npm install -g node-gyp
$ brew install pkg-config cairo libpng jpeg giflib
$ yum libjpeg pkgconfig
$ yarn

Example

绘制一张装X图，这个demo涉及比较个性化的需求。要进行文字旋转，这里展示了两次绘制。与原生API混合使用的方式

Demo1: 装X图片

const data = {
  image: [
    {
      width: 686,
      height: 686,
      imageUrl: "https://img.laiye.com/vAkz2Qhc2mvsQ8z5YxO5CVURovKuRbUE.jpg"
    }
  ]
}

const textData = {
  text: [
    {
      color: "#fff",
      content: "老锅安静如鸡你太美",
      y: 0,
      x: 0,
      size: 20,
      fontWeight: 'bold',
      align: 'left'
    }
  ]
}

const canvas = new LaiyeCanvas(686, 686)

// step 1: 绘制背景图
canvas
  .drawImage(data)
  .then(() => {

    // step 2: 旋转画布
    const context = canvas.getContext()
    context.translate(165, 480)
    context.rotate(-5 * Math.PI / 180)

    // step 3: 绘制文字
    return canvas.drawImage(textData)
  })
  // 导出图片到页面
  .then((base64: string) => {
    const image = new Image()
    image.src = base64
    document.body.appendChild(image)
  })

Demo 2: 绘制一个正方形

import LaiyeCanvas from 'laiye-canvas'

const canvas = new LaiyeCanvas(200, 200)
const ctx = canvas.getContext()

ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 100, 100)

将画布保存到图片

const base64 = canvas.toDataURL()

API

对各个平台都提供一致的canvas的基础API

enum EAlign {
  left = 'left',
  center = 'center',
  right = 'right',
  justify = 'justify'
}

enum EFontWeight {
  bold = 'bold',
  normal = 'normal'
}

// lineHeight 和 limit 主要用于文字多行需要计算折行的情况
// 如果文字是居中对齐，x和y值需要传入水平居中的中心点坐标
export interface IText {
  x: number
  y: number
  content: string
  color: string
  size: number
  align?: EAlign
  fontWeight?: EFontWeight
  lineHeight?: number
  limit?: number
}

// clip字段决定图片是否被裁剪成圆角
// transparent 字段会将图片信息重写，抹去灰度过低的颜色
export interface IImage {
  x: number
  y: number
  height: number
  width: number
  imageUrl: string
  clip?: boolean
  transparent?: boolean
}

export interface ILine {
  lineWidth: number
  color: string
  x1: number
  y1: number
  x2: number
  y2: number
}

interface IContext2DParam {
  fillStyle: string
  font: string
  globalAlpha: number
  globalCompositeOperation: string
  lineCap: string
  lineDashOffset: number
  lineJoin: string
  lineWidth: number
  miterLimit: number
  shadowBlur: number
  shadowColor: string
  shadowOffsetX: number
  shadowOffsetY: number
  strokeStyle: string
  textAlign: string
  textBaseline: string
}

• draw(params: IDrawParam): void
• drawImage(params: any): void
• toDataURL(type: string) => string
• arc
• arcTo
• beginPath
• bezierCurveTo
• clearRect
• clip
• closePath
• createImageData
• createLinearGradient
• createPattern
• createRadialGradient
• drawFocusIfNeeded
• drawImage
• drawWidgetAsOnScreen
• drawWindow
• fill
• fillRect
• fillText
• getImageData
• getLineDash
• isPointInPath
• isPointInStroke
• lineTo
• measureText
• moveTo
• putImageData
• quadraticCurveTo
• rect
• restore
• rotate
• save
• scale
• setLineDash
• setTransform
• stroke
• strokeRect
• strokeText
• transform
• translate

Testing

Unit tests:

$ npm run test

Format of the commit message

• feat (feature)
• fix (bug fix)
• docs (documentation)
• style (formatting, missing semi colons, …)
• refactor
• test (when adding missing tests)
• chore (maintain)

依赖方案

• node-canvas
• Taro
• Flutter
• React Native