https://github.com/cyan33/image-screenshot

download an image node along with its css properties
https://github.com/cyan33/image-screenshot

canvas download images screenshot

Last synced: 2 months ago
JSON representation

download an image node along with its css properties

• Host: GitHub
• URL: https://github.com/cyan33/image-screenshot
• Owner: cyan33
• Created: 2018-02-07T00:41:38.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-08T22:36:49.000Z (over 5 years ago)
• Last Synced: 2024-10-18T06:02:32.379Z (2 months ago)
• Topics: canvas, download, images, screenshot
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/image-screenshot
• Size: 25.4 KB
• Stars: 54
• Watchers: 4
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# image-screenshot

> :camera: targets at **browser** only

## Why Not Right Click and Save

Because in that way the CSS properties added to the image will be lost

There is a more famous library, [html2canvas](https://github.com/niklasvh/html2canvas), that provides the utility of converting the DOM nodes into a picture, but it [does NOT add along with the CSS properties to the pictures](https://github.com/niklasvh/html2canvas/issues/1127).

## Usage

```sh

npm install --save image-screenshot

```

```js

import screenshot from 'image-screenshot'

const img = document.getElementById('my-img')

screenshot(img).download()

```

You might need some flexibility during the process, in which you could do:

```js

screenshot(img).then((url) => {

  console.log('the base64 data url of the image is:', url)

})

```

Other than those, there is a helper function `download` that you could use elsewhere, after you get the base64 url:

```js

import { download } from 'image-screenshot'

download(url, 'image.jpeg')  // the image will be downloaded into `image.jpeg` 

```

## APIs

- `screenshot(img: DOMNode [, format: string, quality: float])`: get the base64 url in a specific format, which is by default `png`. The image resolution quality is a float number that ranges from 0 to 1. The default is 0.97. The function returns a thenable object:

```js

{

  url,  // get the url through screenshot().url

  then: callback,

  download: (downloadFileName: string) => void // defaults to 'image.${format}'

}

```

- `download(url: string, fullName: string)` (Note that this is different from the `download` function returned from `screenshot`)

## Who is Using `image-screenshot`

- [CSS-filter](https://cyan33.github.io/css-filter/)