@kooljay82/vue-m-camera NPM

vue-m-camera

(return back to original orientation)

Purpose

To avoid changing orientation of photo automatically which taken via camera of user's device, you have to use 'exif-js' and 'blueimp-load-image' library.

'exif-js' and 'blueimp-load-image' are very powerful and easy to use. But where developing in vue.js, it might be quite annoying. (Not difficult but need take some time.)

When you are working on some mobile web project (including webview of application), you might have to access camera and photos then you should overcome 'orientation of photo' problem.

So I made it prevent changing orientation automatically in '*.vue' component. (Of course, absolutely, this component using 'exif-js' and 'blueimp-load-image')

This component provides invisible 'input (type=file)' and you can customize it whatever you want.

This component, seems like a 'input (type=file)', has function that pass image file of converted binary data with original orientation.

Reference

stackoverflow: https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images#answer-39384061

(*This answer was very helpful to solve my problem.)

How to install

  npm install @kooljay82/vue-m-camera --save

How to import and registry

In your component,

  import VmcCmpt from "@kooljay82/vue-m-camera"
  export default {
    components: {
      'vmc-cmpt': VmcCmpt
    }
  }

Or in your entry file. (ex: main.js)

  import Vue from 'vue'
  ...
  import VmcCmpt from "@kooljay82/vue-m-camera"
  ...
  Vue.component("vmc-cmpt", VmcCmpt);

How to use

Use 'ul' and 'li' to wrap 'vmc-cmpt' component to use 'hideOrShowBtn' method. It's essential!
Pass length of array containing images to 'len' for watching changes of array. It's essential!
Pass maximum length of array containing images to 'max' for hiding 'vmc-cmpt' component. It's not essential, but recommended.
You could insert slot to 'vmc-cmpt' and could customize button which you inserted. (icons, text, background image etc...)
'imgToData' is custom event that you could handle converted image with this event.
Pass 'maxWidth' for image scaling. It's optional, default is 500.

  <ul class="images-list">
    <li
      v-for="(img, idx) in imgList"
      :key="idx"
      :style="{backgroundImage: 'url(' + img + ')'}"
      class="images-list-item"
    >
      <span @click="removeImageFromArray(idx)" class="remove-btn" role="button">
        <i>&#10005;</i>
      </span>
    </li>
    <li class="images-list-item">
      <vmc-cmpt @imgToData="passImageToArray" :len="imgList.length" :max="max">
        <span class="slot-span">
          <i>&#43;</i>
        </span>
      </vmc-cmpt>
    </li>
  </ul>