gm-loaderdeprecated

Load imported Image's meta data, and some properties

Usage no npm install needed!

<script type="module">
  import gmLoader from 'https://cdn.skypack.dev/gm-loader';
</script>

README

gm-loader

A image loader with some extras.

Provides image metadata from GraphicsMagick

Installation and usage

Make sure you have ImageMagick and GraphicsMagick installed. On OSX, you can just do

brew install imagemagick
brew install graphicsmagick

Documentation: Using Loaders

Install the loader, and set config.output.imageFilename

// webpack.config.js
module.exports = {
    output: {
        publicPath: 'public/',
        imageFilename: '[name]-[hash].[ext]'
    },
    module: {
        loaders: [
            {
                test: /\.(jpg|jpeg|png)/,
                loader: 'gm-loader'
            }
        ]
    }
};

Options

config.output.imageFilename

You can use the placeholders specified here https://github.com/webpack/loader-utils#interpolatename

config.output.publicPath

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

Output

The following metadata are available after importing the image

Example:

var foo = require('./foo.png');

// foo.src => public/foo-8dh929db293898d.png

// foo.width => 400

// foo.height => 200

// foo.format => 'PNG'

// foo.geometry => '400x200'

// foo.depth => 8

// foo.filesize => '4.8Ki'