JSPM

mobile-image-load

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q25254F
  • License "rotation",

This directive allow to load and render some image through various EXIF orientation flags, in both landscape and portrait orientation.

Package Exports

  • mobile-image-load

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mobile-image-load) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mobile-image-load

This directive allow to load and render some image through various EXIF orientation flags, in both landscape and portrait orientation.

Installing

To install the component just:

$ bower install mobile-image-load -save

Then, include the necessary files into your index.html as the example below:

    <script src="bower_components/Blob/Blob.js"></script>
    <script src="bower_components/blueimp-load-image/js/load-image.all.min.js"></script>
    <script src="bower_components/mobile-image-load/image-load-directive.js"></script>

After that, you can import the new directive using 'image-load' tag.

Usage

This directive just work with .jpg, .gif or .png images. To correct the image orientation just add image-load to a parent <div> in your image. See the example below:

<div data-ng-click="openPhotoUploadModal()" class="div80_80 ng-pristine ng-valid" height="80" width="80" ng-model="photo" image-load>
    <img src="http://localhost/statics//upload/users/profile/photo/SEJTAZ/image.jpg" class="user photo-img img80_80 ng-pristine ng-valid" ng-model="account.photo">
</div>

Options

You can set some options to image render as:

  • Height: set the height of the generated canvas just imputing the height attribute to the <div>
  • Width: set the width of the generated canvas just imputing the width attribute to the <div>
  • Class: setting the class attribute to the <div>, the directive replaces automatically the default style for the canvas canvas.