Html2img

A module to download or copy a html element as an image in browser, without backend.

Install

npm install --save https://msstash.morningstar.com/scm/~ttang/html2img.git#fe

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.

pseudo

Boolean. Whether to replace :before and :after as a span tag. If false, IGNORE pseudo elements.

classNames

Array. classes which to pick up from computed styles. Default: ['background-color','box-sizing','color','display','font-family','font-size','line-height','overflow-x','overflow-y','shape-rendering','text-size-adjust','opacity','text-anchor','stroke','stroke-width','fill'], you can pass new to replace it.

backgroundColor

Canvas background color. Default: #ffffff

svgElements

svg tag names, such as svg g path rect text ...

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.