Nihilistic Party Mantra

    save-html-as-image

    1.7.1 • Public • Published

    save-html-as-image

    npm version

    This can be used for a couple of things, it can save HTML (DOM) as an image (JPG,PNG) and it can convert SVG images to PNG. Converting SVG to PNG is useful for Safari Browser compatibility since it cannot render SVG images.

    Structure

    saveAsPng(NODE_ELEMENT, USER_OPTIONS, DOM_OPTIONS);
    saveAsJpeg(NODE_ELEMENT, USER_OPTIONS, DOM_OPTIONS);

    Usage

    import { saveAsPng, saveAsJpeg } from 'save-html-as-image';
    
    const node = document.getElementById('elementId');
    
    //download the node as png. Image (2019-12-01).png
    saveAsPng(node);
    
    //download the node as png. Report (2019-12-01).png
    saveAsPng(node, { filename: 'Report', printDate: true });
    
    //download the node as jpeg. Album.jpeg
    saveAsJpeg(node, { filename: 'Album', printDate: false });
    
    //download the node as jpeg. Album50.jpeg (With 50% of quality)
    saveAsJpeg(node, 
      { filename: 'Album50', printDate: false }, 
      { quality: 0.5 }
    );
    
    //download the node as png and Add padding and center element
    saveAsPng(
        node,
        {  filename: 'Report', printDate: true },
        {
          backgroundColor: 'rgba(101,198,185,0.5)',
          style: {
            padding: '4px',
            display: 'flex',
            justifyContent: 'center',
          },
        }
      );
    

    USER Options

    The options are:

    • filename : The name of the file when download.
    • printDate : The date of the download.
    • forceFixText : Prevent some error with text.

    DOM Options (New)

    Modify the DOM and IMAGE to download.

    The options available are:

    • backgroundColor : A string value for the background color, any valid CSS color value.
    • width, height : Width and height in pixels to be applied to node before rendering. (Only work together)
    • style : An object whose properties to be copied to node's style before rendering. Check (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference)
    • quality : A number between 0 and 1 indicating image quality (e.g. 0.92 => 92%) of the JPEG image. Defaults to 1.0
    • pixelRatio : The pixel ratio of the captured image. Default use the actual pixel ratio of the device. Defaults to 1

    Hide Elements

    You can hide elements adding the class "hide-when-downloading".

    Hide elements apply display: hidden to the elements with this class;

      <section>
        <article>One..</article>
        <article class="hide-when-downloading">Two...</article>
      </section>
    
    saveAsPng(node, {  filename: 'News', printDate: true });
      //Only the first article will be visible on the image
    

    Note: The class "hide-when-downloading" must be on root element, That we want hide.

    Remove Elements

    You can remove elements adding the class "remove-when-downloading".

    Remove Elements apply display: none to the elements. So the space into the element will remove.

    Browsers

    It's tested on the lasted Chrome (Chrome 76), Firefox and Safari.

    We resolve the Safari support with a litte hack and replace svg with image. It's tested with FontAwesomeIcons svgs.

    Dependency

    We use a collection of packages to generate and donwnload images, all in one action. The packages are:

    • 'file-saver'
    • 'html-to-image'
    • 'save-svg-as-png'

    How it work

    • This library use html-to-image library for convert the HTML (DOM) to Image (jpg and png).
    • We use file saver to download the image generated.
    • We use save-svg-as-png to convert the svgs to img elements, only on safary or browser with stricter secure on

    Install

    npm i save-html-as-image

    DownloadsWeekly Downloads

    355

    Version

    1.7.1

    License

    ISC

    Unpacked Size

    54.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • gustavochavarria