1.1.10 • Published 10 months ago

@sergtyapkin/image-uploader v1.1.10

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Static Badge Static Badge npm

ES6 lib or Vue.js module "Get image as base64"

Contents:

ES6 lib interface:

There are 2 functions. All of them returns gotten image in base64 url encoding: import {loadImageInBase64, draggedImageToBase64} from "@sergtyapkin/images-uploader"

1. To get image thorough filesystem dialogue:

/**
 * Opens user file selection (with filter to images) dialog and returns dataURL of selected image.
 * Image is cropped to the specified size
 *
 * @param cropToSquare is results dataUrl must be a square with size of minimal image side, if null => dataUrl with the size of an original image
 * @param compressSize size to compress the longest side in, if null => dataUrl with the size of an original image
 * @param maxFileSizeMB maximum allowed file size
 * @param acceptExtensions list with allowed mime types
 * @returns Data url of image selected by user
 */
export async function loadImageInBase64(
  cropToSquare: boolean,
  compressSize?: number,
  maxFileSizeMB?: number,
  acceptExtensions: string[] = DEFAULT_ACCEPT,
) {
  // ...
}

2. To get image thorough drag and drop or any other file loaders

/**
 * Validate loaded (for example by drag-n-drop) image file and returns dataURL of selected image.
 * Image is cropped to the specified size
 *
 * @param dataTransfer data of all loaded files (you can get in using event.dataTransfer)
 * @param cropToSquare is results dataUrl must be a square with size of minimal image side, if null => dataUrl with the size of an original image
 * @param compressSize size to compress the longest side in, if null => dataUrl with the size of an original image
 * @param maxFileSizeMB maximum allowed file size
 * @returns Data url of image loaded by user
 */
export function draggedImageToBase64 (
  dataTransfer: DataTransfer,
  cropToSquare: boolean = false,
  compressSize?: number,
  maxFileSizeMB?: number,
) {
  // ...
}

Vue.js component:

import DragNDropLoader from "@sergtyapkin/images-uploader/vue"

Usage:

Component has a <slot> place inside to insert the elements on which it must works. Example:

<DragNDropLoader @load="[[loadOutImageToServer]]"
                 @error="alert"
                 :crop-to-square="false"
                 :compress-size="512"
>
  <img class="avatar" :src="[[OurUserAvatarFromVariable]]" alt="avatar">
</DragNDropLoader>

Props:

nametyperequireddescription
cropToSquareBooleanyesIs results dataUrl must be a square with size of minimal image side, if null => dataUrl with the size of an original image
compressSizeNumberyesSize to compress the longest side in, if null => dataUrl with the size of an original image
maxAllowedSizeNumberMaximum allowed file size in MB
worksOnClickBooleanIs loads image by click
worksOnDragNDropBooleanIs loads image by drag and drop into elements inside <slot>
disabledBooleanIs component disabled (not reacts on user events)

Events:

namevaluedescription
loadStringBase64 dataURL of gotten image
errorStringDescription of error if loading not finished successfully
1.1.1

10 months ago

1.1.0

10 months ago

1.1.9

10 months ago

1.1.8

10 months ago

1.1.7

10 months ago

1.1.6

10 months ago

1.1.5

10 months ago

1.1.4

10 months ago

1.1.3

10 months ago

1.1.2

10 months ago

1.1.10

10 months ago

1.0.0

2 years ago