npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuetify-image-upload-resize

v1.0.7

Published

Vuetify restyled version of vue-image-upload-resize by Svale Fossåskaret <[email protected]>

Downloads

43

Readme

Vuetify Image Upload and Resize

A Vuetify style adaptation of the [vue-image-upload-resize] (https://www.npmjs.com/package/vue-image-upload-resize) plugin component

Usage

Global Registration

In script entry point

import ImageUploader from 'vuetify-image-upload-resize'
Vue.use(ImageUploader);

Local Registration

In component

import ImageUploader from 'vuetify-image-upload-resize'
export default {
  components: {
    ImageUploader
  },
  // ...
}

Using with Nuxt.js

Currently the componenet is tied to the window object, so it can't be server side rendered. To get around this you need to install the componenet as a client side plugin.

  1. Create a new file: plugins/vue-image-upload.js, and add the following code:
import Vue from 'vue'
import ImageUploader from 'vuetify-image-upload-resize'

Vue.use(ImageUploader)
  1. In your nuxt.config.js, add the client plugin:
export default {
  // ... other config
  plugins: [
    { src: '~/plugins/vuetify-image-upload.js', mode: 'client' },
  ]
}
  1. When you use the componenent inside a page, make sure to wrap it in <client-only> tags.
<template>
  <client-only>
    <image-uploader
      :debug="1"
    ></image-uploader>
 </client-only>
</template>

Roadmap and todos

TODO: get all vuetify component props, events, slots passing through plug in

currently working: all props need the :bind operator to pass in to plugin

append-icon -> will accept any valid mdi-icon append-outer-icon -> will accept any valid mdi-icon auto-focus -> boolean background-color -> will accept name, rgb, hex and MDI theme colors (primary, secondary, etc.) chips -> boolean clear-icon -> will accept any valid mdi-icon clearable -> boolean dark -> boolean outlined => boolean prepend-icon -> will accept ane valid mdi-icon

currently don't have the skills to get working: counter + related props

            <image-uploader             
              :append-icon="'mdi-camera'"
              :append-outer-icon="mdi-camera"
              :auto-focus="false"
              :background-color="primary"            
              :outlined="true"
              :label="<lable string>"  
            >
            </image-uploader>

Added Props

imagePosition

Sets the v-img field to the top or the bottom of the file input. Default is image at the top.

  • type: Boolean
  • default: true

Original README file starts here

Markup and Props below.


Vue Image Upload and Resize

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 an optional dependency JavaScript Canvas to Blob (for blob output).

vue2

Demo

Edit Vue Image Upload and Resize

Installation

yarn

yarn add vue-image-upload-resize

npm

npm install --save vue-image-upload-resize

Usage

Global Registration

In script entry point

import ImageUploader from 'vue-image-upload-resize'
Vue.use(ImageUploader);

Local Registration

In component

import ImageUploader from 'vue-image-upload-resize'
export default {
  components: {
    ImageUploader
  },
  // ...
}

Using with Nuxt.js

Currently the componenet is tied to the window object, so it can't be server side rendered. To get around this you need to install the componenet as a client side plugin.

  1. Create a new file: plugins/vue-image-upload.js, and add the following code:
import Vue from 'vue'
import ImageUploader from 'vue-image-upload-resize'

Vue.use(ImageUploader)
  1. In your nuxt.config.js, add the client plugin:
export default {
  // ... other config
  plugins: [
    { src: '~/plugins/vue-image-upload.js', mode: 'client' },
  ]
}
  1. When you use the componenent inside a page, make sure to wrap it in <client-only> tags (<no-ssr> in v < 2.9.0, docs).
<template>
  <client-only>
    <image-uploader
      :debug="1"
    ></image-uploader>
 </client-only>
</template>

As global script

<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.

Markup

<template>
  <image-uploader
    :debug="1"
    :maxWidth="512"
    :quality="0.7"
    :autoRotate=true
    outputFormat="verbose"
    :preview=false
    :className="['fileinput', { 'fileinput--loaded' : hasImage }]"
    :capture="false"
    accept="video/*,image/*"
    doNotResize="['gif', 'svg']"
    @input="setImage"
    @onUpload="startImageResize"
    @onComplete="endImageResize"
  ></image-uploader>
</template>

Input label slot

An optional label tag can be added as a slot

Example

<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>

Settings

Props

id

The ID for the file input, required if more than one instance should be used on the same page.

  • default fileInput
  • type String

maxWidth

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.

  • type: Number
  • default: 1024

maxHeight

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.

  • type: Number,
  • default: 1024

maxSize

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

  • type: Number,
  • default: null

quality

A float between 0 and 1.00 for the image quality to use in the resulting image data, around 0.9 is recommended.

  • type: Number,
  • default: 1.00

scaleRatio

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.

  • type: Number,
  • default: null

autoRotate

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. This functionality is based on the library [exif-js] https://github.com/exif-js/exif-js.

  • type: Boolean,
  • default: false

preview

A boolean flag to toogle an img-tag displaying the uploaded image. When set to false no img-tag is displayed.

  • type: Boolean,
  • default: true

outputFormat

Sets the desired format for the returned image. Available formats are

  • string - image as base64 string.
  • info - object with image info only [name, type, newWidth, newHeight, orgWidth, orgHeight, aspectRatio (as Float), modifiedTimestamp, modifiedDate].
  • verbose - object with 'dataUrl' (image as base64 string), 'info' (image info) and 'exif' data (null if not available).
  • blob - image as A Blob object. NB: The 'blob' format requires that the blueimp-canvas-to-blob library is loaded. If not, a warning is echoed to the console.
  • file - unmodified uploaded File object.
  • type: String,
  • default: 'string'

className

Sets the desired class name for the input element

  • type: String or Array
  • default: 'fileinput'

capture

Sets an optional capture attribute (camera, user, environment) to the input element (only for mobile devices). The "camera" 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. To also access the device gallery capture must be set to 'false'

  • type: String
  • default: false (off)

accept

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

  • type: String
  • default: 'image/*'

doNotResize

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.

  • type String or Array
  • default: null

debug

How much to write to the console. 0 = silent. 1 = quiet. 2 = loud

  • type: Number,
  • default: 0

Events

@input

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
    }
  }

@onUpload

On start of upload.

@onComplete

On end of upload.

Optional dependencies

If outformat="blob" the required libraby canvas-to-blob.min.js must be available. If the plugin is loaded with <script>-tag in global scope, so must the relevant lilbrary:

index.html

<script src="js/canvas-to-blob.min.js" async defer></script>

If loaded as module, npm handles all dependecies.

Roadmap and todos

  1. Progress report
  2. Support multiple files
  3. Implement completion callback
  4. Propper unit testing of events
  5. ~~Clean up scaffolding and project files~~
  6. Exclude optional dependecies from package

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Compiles and minifies lib bundle

yarn run build-lib

Run your tests

yarn run test

Lints and fixes files

yarn run lint