cs
canvas-screenshots
npm i canvas-screenshots
cs

canvas-screenshots

🎨 A website screenshots tools with canvas.

by Chenghao Yao

0.1.15 (see all)License:ISCTypeScript:DefinitelyTyped
npm i canvas-screenshots
Readme

canvas-screenshots

canvas-screenshots is a useful screenshots tools on your website created by canvas.The behavior is similar with your PC clients like wechat or QQ.

Installation

npm install --save-dev canvas-screenshots

Usage

import ScreenShoots from 'canvas-screenshots';

// generate a screenshots
const screen = new ScreenShoots({
    download: data => {
        console.log(data);
    },
});

// create mask above
screen.start();

Demo

demo

Surrpoted fcuntions

  • Rectangular
  • Circle & Ellipsis
  • Arrow
  • Pen
  • Text
  • Mosaic
  • Image
  • Back

Config

  • plugins

    The switch to each function.
    
    type: Array<pluginType>
    pluginType: 'rectangular' || 'circle' || 'arrow' || 'pen' || 'text' || 'mosaic' || 'image' || 'back'
    default: Array<all pluginType>
    required: false
    
  • download

    Trigger when click the download button, the type of output data will be decided by config type.
    
    type: Function
    default: noop function
    required: true
    arguments: data
    
  • imageFail

    Trigger when choose a image but not match the expected.
    
    type: Function
    default: noop function
    required: false
    arguments: error
    
  • outputType

    The output type with download.
    
    type: string('imageData' || 'png' || 'file')
    default: 'imageData'
    required: false
    

Surrported browsers

  • Chrome

The browsers supported is now minimal because of the different behavior of canvas, and it will soon be more.

Downloads/wk

105

GitHub Stars

13

LAST COMMIT

5mos ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.1.15
latest
5mos ago
No alternatives found
No tutorials found
Add a tutorial