https://github.com/saabi/svelte-image-encoder

An <ImgEncoder> Svelte component for editing and compressing profile pictures before upload to a server.
https://github.com/saabi/svelte-image-encoder

svelte-components svelte-framework svelte-v3 sveltejs

Last synced: about 1 month ago
JSON representation

An <ImgEncoder> Svelte component for editing and compressing profile pictures before upload to a server.

• Host: GitHub
• URL: https://github.com/saabi/svelte-image-encoder
• Owner: saabi
• License: isc
• Created: 2019-04-14T03:18:56.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-23T21:18:19.000Z (over 1 year ago)
• Last Synced: 2024-03-04T06:02:03.376Z (4 months ago)
• Topics: svelte-components, svelte-framework, svelte-v3, sveltejs
• Language: TypeScript
• Size: 24.4 KB
• Stars: 44
• Watchers: 4
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-svelte-resources - `svelte-image-encoder` - (components and libraries / images)

README

        
# svelte-image-encoder ([demo](https://svelte.dev/repl/cb1ec0dcc5dfaa1e0de3844f3e7348d6))

> This repos is now considered deprecated and is superseded by 

> [svelte-image-input](https://github.com/saabi/svelte-image-input), which 

> supports more features such as image loading, dropping and pasting.

A component for creating `data:` URLs from images in real time. You can also move and resize the image before encoding.

The data URL enables sending and receiving the image inside JSON AJAX requests and perhaps storing images 

in database string columns, where an image URL would go, simplifying code logic.

The original intended use is for use in a profile picture editor, allowing the user to resize and crop 

images, finally storing them in a small `data:` URL but it may be useful when you need basic image 

resizing/cropping capabilities.

## Installation

```bash

npm i svelte-image-encoder [-D]

```

## Usage

```html

  import ImgEncoder from 'svelte-image-encoder';

  let src='some-image.jpg';

  let url;

{url}

```


## Parameters

You can specify the following parameters:

* `src` — the original image URL. Any valid image URL will work, except if `crossOrigin` is set to false.

* `url` — the generated `data:` URL. Read only.

* `realTime` — if `true` the data URL is generated in real time while dragging or resizing the image, defaults to `false` and is generally not needed to be `true`.

* `quality` — JPEG quality factor.  Defaults to `0.5`.

* `width` — The encoded image's width. Defaults to `256`.

* `height` — The encoded image's height. Defaults to `256`.

* `crossOrigin` — enables loading cross origin URLs. Defaults to `false`.

* `classes` — Allows for theming by specifying global classes. Defaults to ``.

## Configuring webpack

If you're using webpack with [svelte-loader](https://github.com/sveltejs/svelte-loader), make sure that you add `"svelte"` to [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config. This ensures that webpack imports the uncompiled component (`src/index.svelte`) rather than the compiled version (`index.mjs`) — this is more efficient.

If you're using Rollup with [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte), this will happen automatically.

## TODO

* Add a boolean property to choose between displaying the compressed or uncompressed result. Needs som reworking of the internals.

## License

[ISC](LICENSE)