Element2canvas NPM

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

canvas image screenshot high reduction degree html2canvas element2canvas

@everything-registry/sub-chunk-1568

6 years ago

6 years ago

6 years ago

6 years ago