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

Contents:

• ES6 lib interface
• Vue.js component

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:

| name | type | required | description | |------------------|---------|----------|----------------------------------------------------------------------------------------------------------------------------| | cropToSquare | Boolean | yes | Is results dataUrl must be a square with size of minimal image side, if null => dataUrl with the size of an original image | | compressSize | Number | yes | Size to compress the longest side in, if null => dataUrl with the size of an original image | | maxAllowedSize | Number | | Maximum allowed file size in MB | | worksOnClick | Boolean | | Is loads image by click | | worksOnDragNDrop | Boolean | | Is loads image by drag and drop into elements inside <slot> | | disabled | Boolean | | Is component disabled (not reacts on user events) |

Events:

| name | value | description | |----------------|--------|-----------------------------------------------------------| | load | String | Base64 dataURL of gotten image | | error | String | Description of error if loading not finished successfully |