Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

svelte-image-encoder

saabi84ISCdeprecated1.2.5TypeScript support: included

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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

svelte, profile picture, image encoder

readme

svelte-image-encoder (demo)

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

npm i svelte-image-encoder [-D]

Usage

<script>
  import ImgEncoder from 'svelte-image-encoder';
  let src='some-image.jpg';
  let url;
</script>

<ImgEncoder {src} bind:url />
<p>{url}</p>

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, make sure that you add "svelte" to 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, 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

changelog

svelte-subdivide changelog

1.2.5

  • Fixing publisihing problem appearing on Svelte REPL. Temporary fix for now.

1.2.4

  • Now captures mouseup events outside of element.

1.2.3

  • Now uses more reliable code to detect if running in a browser.

1.2.2

  • Removed Typescript from component source code.

1.2.1

  • Fixed build issue inside Svelte projects.

1.2.0

  • Added support for mouse events. Should make Safari work.

1.1.0

  • Added classes property, helpful for theming.

1.0.0

  • Basic functionality, allows resizing and moving the selected image.