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
npm i svelte-image-encoder [-D]
You can specify the following parameters:
src— the original image URL. Any valid image URL will work, except if
crossOriginis set to false.
url— the generated
data:URL. Read only.
truethe data URL is generated in real time while dragging or resizing the image, defaults to
falseand is generally not needed to be
quality— JPEG quality factor. Defaults to
width— The encoded image's width. Defaults to
height— The encoded image's height. Defaults to
crossOrigin— enables loading cross origin URLs. Defaults to
classes— Allows for theming by specifying global classes. Defaults to ``.
If you're using webpack with svelte-loader, make sure that you add
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.
- Add a boolean property to choose between displaying the compressed or uncompressed result. Needs som reworking of the internals.