{"id":28638989,"url":"https://github.com/gustavochavarria/save-html-as-image","last_synced_at":"2025-06-12T19:10:08.325Z","repository":{"id":35156553,"uuid":"213750527","full_name":"gustavochavarria/save-html-as-image","owner":"gustavochavarria","description":"Download the HTML (DOM) to Image (JPG, PNG)","archived":false,"fork":false,"pushed_at":"2023-06-13T15:05:34.000Z","size":5335,"stargazers_count":29,"open_issues_count":30,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-28T22:42:18.767Z","etag":null,"topics":["dom","download-as-image","hacktoberfest","hacktoberfest2021","javascript","jpg","png"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gustavochavarria.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-08T20:45:50.000Z","updated_at":"2025-04-18T04:49:08.000Z","dependencies_parsed_at":"2023-02-18T03:31:35.415Z","dependency_job_id":null,"html_url":"https://github.com/gustavochavarria/save-html-as-image","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/gustavochavarria/save-html-as-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavochavarria%2Fsave-html-as-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavochavarria%2Fsave-html-as-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavochavarria%2Fsave-html-as-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavochavarria%2Fsave-html-as-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gustavochavarria","download_url":"https://codeload.github.com/gustavochavarria/save-html-as-image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavochavarria%2Fsave-html-as-image/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259519872,"owners_count":22870374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","download-as-image","hacktoberfest","hacktoberfest2021","javascript","jpg","png"],"created_at":"2025-06-12T19:10:05.814Z","updated_at":"2025-06-12T19:10:08.244Z","avatar_url":"https://github.com/gustavochavarria.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# save-html-as-image\n\n[![npm version](https://badge.fury.io/js/save-html-as-image.svg)](https://badge.fury.io/js/save-html-as-image)\n\n\nThis 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.\nConverting SVG to PNG is useful for Safari Browser compatibility since it cannot render SVG images.\n\n## Structure\n\n```js\n\nsaveAsPng(NODE_ELEMENT, USER_OPTIONS, DOM_OPTIONS);\nsaveAsJpeg(NODE_ELEMENT, USER_OPTIONS, DOM_OPTIONS);\n\n```\n\n## Usage\n\n```js\nimport { saveAsPng, saveAsJpeg } from 'save-html-as-image';\n\nconst node = document.getElementById('elementId');\n\n//download the node as png. Image (2019-12-01).png\nsaveAsPng(node);\n\n//download the node as png. Report (2019-12-01).png\nsaveAsPng(node, { filename: 'Report', printDate: true });\n\n//download the node as jpeg. Album.jpeg\nsaveAsJpeg(node, { filename: 'Album', printDate: false });\n\n//download the node as jpeg. Album50.jpeg (With 50% of quality)\nsaveAsJpeg(node, \n  { filename: 'Album50', printDate: false }, \n  { quality: 0.5 }\n);\n\n//download the node as png and Add padding and center element\nsaveAsPng(\n    node,\n    {  filename: 'Report', printDate: true },\n    {\n      backgroundColor: 'rgba(101,198,185,0.5)',\n      style: {\n        padding: '4px',\n        display: 'flex',\n        justifyContent: 'center',\n      },\n    }\n  );\n\n\n```\n\n## USER Options\n\nThe options are: \n- **filename** : The name of the file when download.\n- **printDate** : The date of the download.\n- **forceFixText** : Prevent some error with text.\n\n\n## DOM Options (New)\n\nModify the DOM and IMAGE to download.\n\nThe options available are:\n- **backgroundColor** : A string value for the background color, any valid CSS color value.\n- **width, height** : Width and height in pixels to be applied to node before rendering. (Only work together)\n- **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)\n- **quality** : A number between 0 and 1 indicating image quality (e.g. 0.92 =\u003e 92%) of the JPEG image. Defaults to 1.0\n- **pixelRatio** : The pixel ratio of the captured image. Default use the actual pixel ratio of the device. Defaults to 1\n\n\n## Hide Elements\n\nYou can hide elements adding the class **\"hide-when-downloading\"**.\n\nHide elements apply `display: hidden` to the elements with this class;\n\n```\n  \u003csection\u003e\n    \u003carticle\u003eOne..\u003c/article\u003e\n    \u003carticle class=\"hide-when-downloading\"\u003eTwo...\u003c/article\u003e\n  \u003c/section\u003e\n```\n\n```\nsaveAsPng(node, {  filename: 'News', printDate: true });\n  //Only the first article will be visible on the image\n```\n\n**Note**: The class \"hide-when-downloading\" must be on root element, That we want hide.\n\n## Remove Elements\n\nYou can remove elements adding the class **\"remove-when-downloading\"**.\n\nRemove Elements apply `display: none` to the elements. So the space into the element will remove.\n\n\n## Browsers\nIt's tested on the lasted Chrome (Chrome 76),  Firefox and *Safari*.\n\nWe resolve the Safari support with a litte hack and replace svg with image. It's tested with FontAwesomeIcons svgs.\n\n\n## Dependency\n\nWe use a collection of packages to generate and donwnload images, all in one action.\nThe packages are:\n\n- 'file-saver'\n- 'html-to-image'\n- 'save-svg-as-png'\n\n## How it work\n\n- This library use **html-to-image** library for convert the HTML (DOM) to Image (jpg and png).\n- We use file saver to download the image generated.\n- We use save-svg-as-png to convert the svgs to img elements, only on safary or browser with stricter secure on **\u003cforeignObject\u003e**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgustavochavarria%2Fsave-html-as-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgustavochavarria%2Fsave-html-as-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgustavochavarria%2Fsave-html-as-image/lists"}