@fengyuanchen/loader

JavaScript image loader.

Stats

StarsIssuesVersionUpdatedCreatedSize
@fengyuanchen/loader
0.1.16 years ago6 years agoMinified + gzip package size for @fengyuanchen/loader in KB

Readme

Loader

JavaScript image loader (translates Exif Orientation by canvas).

Install

npm install @fengyuanchen/loader
<script src="/path/to/loader.js"></script>

Usage

<img id="image" src="image.jpg">
var image = document.getElementById('image');
var loader = new Loader(image, {
  done: function(image) {
    console.log(image); // HTMLImageElement
  }
});

Options

You may set cropper options with new Loader(image, options).

type

  • Type: String
  • Default: 'image'
  • Options: 'image' and 'canvas'

Define the type of the loaded image or canvas.

new Loader(image, {
  type: 'canvas',
  done: function(canvas) {
    console.log(canvas); // HTMLCanvasElement
    console.log(canvas.toDataURL()); // Data URL
  }
});

width

  • Type: Number
  • Default: NaN

Define the new width of the loaded image or canvas. Use the natural width of the original image by default.

height

  • Type: Number
  • Default: NaN

Define the new height of the loaded image or canvas. Use the natural height of the original image by default.

minWidth

  • Type: Number
  • Default: 0

Define the minimum width of the loaded image or canvas.

minHeight

  • Type: Number
  • Default: 0

Define the minimum height of the loaded image or canvas.

maxWidth

  • Type: Number
  • Default: Infinity

Define the maximum width of the loaded image or canvas.

maxHeight

  • Type: Number
  • Default: Infinity

Define the maximum height of the loaded image or canvas.

done

  • Type: Function
  • Default: null

Load complete callback.

new Loader(image, {
  done: function(image) {
    console.log(image);
  }
});

No conflict

If you have to use other global function with the same namespace, just call the Loader.noConflict static method to revert to it.

<script src="other-loader.js"></script>
<script src="loader.js"></script>
<script>
  Loader.noConflict();
  // Code that uses other `Loader` can follow here.
</script>

Browser support

  • Chrome (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 10+
  • Opera (latest 2)
  • Safari (latest 2)

License

MIT © Fengyuan Chen

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.