First, let’s talk about why we need to do this project. H5 activities often require DOM composite images. Html2canvas library is also available on Github to realize this problem, but the DOM properties after calculation will inevitably deteriorate when they are drawn on canvas. As a result, the resulting pictures are not satisfactory, so I have the idea of developing this project. This project has just started, so it supports limited functions. At present, elements of image and text have been added to canvas, and other elements or attributes will be continuously updated later. If you encounter any bug in the process of use, please mention issues or send email to me at [email protected]. Github address, welcome PR, STAR and code Contribution. Thank you for your support.

element2canvas

English version of English

It is a process of converting pictures and texts into canvas composite pictures to achieve screenshots. This plug-in does not need to calculate DOM attributes and there will be no deviation, so the restoration degree is up to 99%+

The installation

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

usage

Details of the demo

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

Configuration properties

attribute instructions type The default value
width The width of the canvas number 0
height The height of the canvas number 0
zIndex This property is similar to the CSS Z-index property number 0
container The DOM position of the canvas insertion string / DOM body
background Background color or picture string transparent
crossOrigin Pictures of cross-domain sring(anonymous) none
elements Child element configuration array none

element properties

attribute instructions type The default value
width The width of the element number 0
height The height of the element number 0
zIndex This property is similar to the CSS Z-index property number 0
top This is similar to the CSS TOP property number 0
bottom This is similar to the CSS Bottom property number 0
left This is similar to the CSS left property number 0
right This is similar to the CSS Right property number 0
src Pictures of the SRC string none
text The text content string none
fontSize The font size number 12
fontFamily The font string none
color The font color string none

Method of instance

methods instructions return parameter
init Example Initialize the configuration information Promise
toDataURL Convert canvas to base64 encoded image image of base64 type(image/jpeg, …) , quality
add Add an element Promise element