Html2img
A module to download or copy a html element as an image in browser, without backend.
Install
npm install --save html2img
Usage
import Html2Img from 'html2img'
document.getElementById('button').addEventListener('click', e => {
var el = document.getElementById('my-container')
Html2Img.save(el, {
name: 'download-file-name',
type: 'jpg',
})
})
Notice: now copy method is not finished.
Options
el
string
If you pass a string as el
, html2img will use it as a selector by querySelector
, so you should pass string like #m-container
.
element
Like what I have done previous, you can just pass a document element in.
options
The second parameter is a object. You can learn more from html2canvas.
Except html2canvas options, you MUST pass a name
and type
option.
name
name
is used for download file name.
type
type
is used for canvas convertor and download file type and extension.
width
Canvas width, not layer with. Layer with is the same with your element's width. So if you do not want a different canvas width from your element, leave it with undefined.
height
Canvas height, same logic with width.
Methods/API
Html2Img.save(el, options)
Save html element as an image.
You'd better use in click event handler function.
Html2Img.copy(el, options)
Copy to clipboard.
Notice: this function has not been finished.
Generator
This component is generated by componer.