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

vue-cropgram

v1.0.6

Published

Instagram Style Image Uploader for Vue

Downloads

18

Readme

Vue-Cropgram: Upload Images like in Instagram 🖼

If you are only looking to crop images like in Instagram, please visit https://github.com/avidofood/vue-instagram-cropper 😜

Installation in 2 Steps

1: Add with npm 💻

 npm install vue-cropgram

2a: Install as a component

 import CropGram from 'vue-cropgram'

 Vue.component('crop-gram', CropGram);

2b: Install as a plugin

 import { Plugin } from 'vue-cropgram'

 Vue.use(Plugin);

Usage - (or to make it runnable 🏃‍♂️)

Easiest version 🔍

 <crop-gram ref="cropgram"></crop-gram>

Advanced version 🌐

Just an example:

 <crop-gram
   ref="cropgram"
   canvas-color="#F7F7F7"
   placeholder-color="#67ACFD"
   selection-text-class="px-2 mb-1 text-left small-9 text-uppercase text-primary2 spacing-05"
   force-cache-break
   selection-text="Choosen images"
   placeholder="Choose an image"
   :items="pictures"
   :show-cropper="currentTab == 'pictures'"
   :placeholder-font-size="16"
   :file-size-limit="20000 * 1024"
   @init="$emit('init')"
   @set-view="currentTab = 'pictures'"
>
   <shows-instagram-feed-as-an-example
      v-show="currentTab == 'instagram'"
      :has-token="hasToken"
   />
</crop-gram>

Demo ⚡️

https://avidofood.github.io/vue-cropgram

Props

IMPORTANT: This package contains the props of https://avidofood.github.io/vue-instagram-cropper as well. Please have a check!

Props values

  • showCropper (default: true, type: Boolean)

Perfect to hide the cropper, but still shows the selected images. Usefull, when you want to show something else.

  • items (default: [], type: Array)

Contains all your pictures you want to contain. Important, they must be valid URLs. Visit the demo page to have a look.

  • mimeType (default: image/jpeg, type: String)

  • compression (default: 0.8, type: Number)

  • selectionText (default: Chosen Images, type: String)

  • selectionTextClass (default: '', type: String)

  • itemsLimit (default: 4, type: Number)

Limits how many images can be choosen.

Events

IMPORTANT: Same as for props, this package contains the events of https://avidofood.github.io/vue-instagram-cropper as well. Please have a check!

  • choose-file-button: Emitted only when the Choose-File-Button was used.
  • set-view: Emitted when the view was changed
  • limit-reached: Emitted when the limit of itemsLimit was reached
  • has-changed: Emitted when images are added, moved, zoomed in/out or the order changed.
  • thumbnail-error(index): Emitted when thumbnail is not loaded.

Methods

You need to set ref=cropgram to the HTML tag <crop-gram>. After that you can call all methods like this this.$refs.cropgram.save().

  • save(): Results a promise with an array of objects. Contains url or blob as a result. Here is an example how you can send this to your backend:
createFormData() {
   const result = await this.$refs.cropgram.save()

   const data = new FormData();
   //list of your pics
   result.forEach((picture, index) => {
         data.append(`media[${index}]`, picture.url || picture.blob);
   });
   return data;
},
  • getCurrentCropperThumbnail(): Get's thumbnail of the current view
  • chooseFile(): Choose a file
  • setView(id): Sets a view with index
  • addNewUrl(url): Sets an image via URL

TODO

I have only limited time to develop this package further. It would mean a lot to me, if you would help me to improve it step by step. This package contains my cropper package that also has a todo list. Have a look: vue-instagram-cropper and here is a small list, what is still missing for this package:

  • If you want to use the slot in vue-instagram-cropper, we need to develiver the content there.
  • If you have multiple images and you remove one, you will see in a tiny fraction the placeholder text.
  • We need to lock the image aspect ratio. For that we need to add a the prop forceAspect but for vue-instagram-cropper.
  • Do we need private methods like in vue-instagram-cropper?

Security

If you discover any security related issues, please don't email me. I'm afraid 😱. [email protected]

Credits

Now comes the best part! 😍 This package is based on

  • https://github.com/zhanziyang/vue-croppa (but simplefied)

Oh come on. You read everything?? If you liked it so far, hit the ⭐️ button to give me a 🤩 face.