A Vue.js Plugin Component for client-side image upload with optional resizing and exif-based autorotate.
This plugin was created for the use in a webapp scenario where we had a large number of end users uploading camera photos from their mobile devices on partly low end data plans. The primary purpose is therefor client-side resizing and if needed exif-based auto-rotation. It can however also be use simply as a file upload component.
Based on [ImageUploader] (https://github.com/rossturner/HTML5-ImageUploader) by Ross Turner. The plugin makes use of two optional dependencies: Exif.js (for autorotate) and JavaScript Canvas to Blob (for blob output).
yarn add vue-image-upload-resize
npm install --save vue-image-upload-resize
In script entry point
import ImageUploader from 'vue-image-upload-resize'
Vue.use(ImageUploader);
<script src="https://unpkg.com/vue-image-upload-resize"></script>
The global script automatically registers as a global componenet. See public/demo.html for example use.
<template>
<image-uploader
:debug="1"
:maxWidth="512"
:quality="0.7"
:autoRotate=true
outputFormat="verbose"
:preview=false
:className="['fileinput', { 'fileinput--loaded' : hasImage }]"
capture="environment"
accept="video/*,image/*"
doNotResize="['gif', 'svg']"
@input="setImage"
@onUpload="startImageResize"
@onComplete="endImageResize"
></image-uploader>
</template>
An optional label tag can be added as a slot
<image-uploader ... >
<label for="fileInput" slot="upload-label">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"></path>
</svg>
</figure>
<span class="upload-caption">{{ hasImage ? 'Replace' : 'Upload' }}</span>
</label>
</image-uploader>
The ID for the file input, required if more than one instance should be used on the same page.
An integer in pixels for the maximum width allowed for uploaded images, selected images with a greater width than this value will be scaled down before upload.
An integer in pixels for the maximum height allowed for uploaded images, selected images with a greater height than this value will be scaled down before upload.
NB Is broken, see https://github.com/rossturner/HTML5-ImageUploader/issues/13.
A float value in megapixels (MP) for the maximum overall size of the image allowed for uploaded images, selected images with a greater size than this value will be scaled down before upload. If the value is null or is not specified, then maximum size restriction is not applied
A float between 0 and 1.00 for the image quality to use in the resulting image data, around 0.9 is recommended.
Allows scaling down to a specified fraction of the original size. (Example: a value of 0.5 will reduce the size by half.) Accepts a decimal value between 0 and 1.
A boolean flag, if true then EXIF information from the image is parsed and the image is rotated correctly before upload. If false, then no processing is performed, and unwanted image flipping can happen. NB: Requires that the exif-js library is loaded. If not, a warning is echoed to the console.
A boolean flag to toogle an img-tag displaying the uploaded image. When set to false no img-tag is displayed.
Sets the desired format for the returned image. Available formats are ‘string’ (base64), verbose (object), ‘blob’ (object) of ‘file’ (unmodified uploaded File object).
NB: The ‘blob’ format requires that the blueimp-canvas-to-blob library is loaded. If not, a warning is echoed to the console.
Sets the desired class name for the input element
Sets an optional capture attribute (camera, user, environment) to the input element.
The “camera” value (or no value) let’s the browser decide which camera to use, while the “user” and “environment” values tell the browser to prefer the front and rear cameras, respectively.
Specifies the types of files that can be submitted through the file upload. The types can be valid file extension starting with the STOP character (e.g: “.gif, .jpg, .png”) or wildcare file types (e.g. audio/, video/, image/*"). To specify more than one value, separate the values with a comma
Specifies filetypes that will not be resized. Accepts an array of image’s extension. If only 1 extension, it can be provided directly as a string.
How much to write to the console. 0 = silent. 1 = quiet. 2 = loud
Returns the processed image in requested outputformat. From this event you can add optional hooks.
<image-uploader @input="setImage"></image-uploader>
methods: {
setImage: function (file) {
this.hasImage = true
this.image = file
}
}
On start of upload.
On end of upload.
yarn install
yarn run serve
yarn run build
yarn run build-lib
yarn run test
yarn run lint
Author: kartoteket
GitHub: https://github.com/kartoteket/vue-image-upload-resize
#vuejs #javascript #vue-js