https://github.com/lizheming/simple2canvas

Generate image with json data by canvas
https://github.com/lizheming/simple2canvas

canvas generator html2canvas image json simple2canvas

Last synced: 2 months ago
JSON representation

Generate image with json data by canvas

• Host: GitHub
• URL: https://github.com/lizheming/simple2canvas
• Owner: lizheming
• License: mit
• Created: 2020-02-23T03:09:15.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-09-10T22:58:07.000Z (over 2 years ago)
• Last Synced: 2024-10-20T12:35:56.023Z (2 months ago)
• Topics: canvas, generator, html2canvas, image, json, simple2canvas
• Language: JavaScript
• Homepage: https://simple2canvas.netlify.com/
• Size: 2.36 MB
• Stars: 23
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Simple2Canvas

Generate image with json data by canvas https://simple2canvas.netlify.com/

## Installation

You can install it with npm or ``:

```bash

npm install simple2canvas --save-dev

```

```html

<script src="https://unpkg/simple2canvas/dist/simplecanvas.umd.min.js">

```

## Usage

```js

const simple2canvas = require('simple2canvas');

const options = {

  width: 360,

  height: 360,

  rate: 2,

  elements: [

    {

      type: 'rect',

      width: 360,

      height: 360,

      top: 0,

      left: 0,

      fill: '#FFF'

    },

    {

      type: 'text',

      text: 'Hello World!',

      top: 10, 

      left: 10,

      fontSize: 18,

      lineHeight: 18,

      color: 'black'

    }

  ]

};

(async() => {

  const canvas = await simple2canvas(options);

  

  const img = document.createElement('img');

  img.style.width = options.width + 'px';

  img.style.height = options.height + 'px';

  img.src = canvas.toDataURL();

  document.body.appendChild(img);

})();

```

## Configuration

| name | required | default | description |

|------|:----------:|:---------:|-------------|

| width | ✔️ | | canvas width |

| height | ✔️ | | canvas height |

| rate | | 1 | canvas pixel ratio |

| render | | 'html' | canvas render |

| elements | | [] | canvas elements |

### Elements Configuration

#### rect

- `top`

- `left`

- `width`

- `height`

- `fill`

- `round`

#### image

- `top`

- `left`

- `width`

- `height`

- `url`

#### text

- `top`

- `left`

- `fontSize`

- `lineHeight`

- `text`

- `color`

- `textAlign`

- `fontWeight`

- `fontFamily`

## Example

run npm start and open http://localhost:3000

online example: https://simple2canvas.netlify.com/

## License

simple2canvas is released under the MIT license.