element2canvas

a plugin for canvert elements like iamge, text and so on to a canvas or image, screenshot and so on. It's a little plugin by js and never need to compute DOM properties, so it could have nealy 99% degree of reduction. From the interface It's very convenience.

Install

npm install elment2canvas --save or <script src="path/to/index.min.js"></script>

Usage

detail in exzample

  var canvas = new element2canvas(opts)
  canvas.init().then(() => {
    return canvas.add(opts)
  }).then(() => {
    var img = document.createEelement('img')
    img.src = canvas.toDataURL('image/jpeg', 0.8)
    img.onload = () => {
      (document.body || document.documentElement).appendChild(img)
    }
  }) 

configuration properties options

| properties | instruction | type | default | :-: | :-: | :-: | :-: | | width | canvas's width | number | 0 | | height | canvas's height | number | 0 | | zIndex | like css z-index property | number | 0 | | container | canvas Element be appended in | string / DOM | body| | background | background color or image | string | transparent | | crossOrigin | image security state | sring(anonymous) | none | | elements | element in canvas | array | none |

element properties

| properties | instruction | type | default | :-: | :-: | :-: | :-: | | width | element's width | number | 0 | | height | element's height | number | 0 | | zIndex | like css z-index property | number | 0 | | top | postion like css property | number | 0 | | bottom | postion like css property | number | 0 | | left | postion like css property | number | 0 | | right | postion like css property | number | 0 | | src | image src | string | none | | text | text content | string | none | | fontSize | font-size like css property | number | 12 | | fontFamily | font-family like css property | string | none | | color | font color | string | none |

instance's methods

| method | instruction | return | params | | :-: | :-: | :-: | :-: | | init | initialize the cavans and append to DOM | Promise | | toDataURL | cavans to image of base64 | image of base64 | type(image/jpeg, ...), quality | | add | add a element to canvas | Promise | element |