Socket
Socket
Sign inDemoInstall

save-html-as-image

Package Overview
Dependencies
3
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

save-html-as-image

Save the html as image like png or jpg


Version published
Maintainers
1
Weekly downloads
311
decreased by-12.89%

Weekly downloads

Readme

Source

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

Keywords

FAQs

Last updated on 16 Feb 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc