This package has been deprecated

Author message:

this package has been deprecated, consider removing it from your project

imgin-loader

A webpack loader to generate img placeholders

Installation

npm install --save-dev imgin-loader

Basic usage

In webpack config:

module: {
    loaders: [
        {
            test: /img\.in/,
            loader: 'imgin-loader'
        }
        ...
    ]
}

In javascript:

var imgurl = require('imgin-loader/img.in?size=256x256&bg=808080&color=ffffff&text=imgin%2Epng&font=md');

var img = document.createElement('img');

img.addEventListener('load', function() {
  document.getElementById('elem-id').appendChild(this);
});

img.src = imgurl;

The loader emits a .png file in the output directorey with the properties provided in resource query, and the name generated as MD5 hash of the file's content, and returns the public url of the file.

Resource query parameters

• size: widthxheight (default: 256x256)
• bg: hex color (default: 808080ff). RGB or RGBA hex string.
• color: hex color (default: ffffffff). RGB or RGBA hex string.
• text: string (default: widthxheight). Should be url encoded for special characters.
• font: xs | sm | md | lg (default: md). xs: 16px, sm: 32px, md: 64px, lg: 128px.

There might be some special characters in the text parameter which should be escaped to avoid unwanted results. The text is decoded as URI component so you can use URI encoded characters for special characters to escape them. '%' (percent character) in text parameter can only be used for url encoding of other characters and not as a character by itself.

Some characters which might need to be escaped:

space	!	"	&	'	,	.	/	=	?	\	`
%20	%21	%22	%26	%27	%2C	%2E	%2F	%3D	%3F	%5C	%60

Usage in html with html-loader

In webpack config:

module: {
    loaders: [
        {
            test: /img\.in/,
            loader: 'imgin-loader'
        },
        {
            test: /\.html/,
            loader: 'html-loader'
        }
        ...
    ]
}

In html:

<img src="~imgin-loader/img.in?size=640x480&bg=ff8888&text=My%20Image">

In javascript:

var html = require('path/to/html/file.html');

document.getElementById('elem-id').innerHTML = html;

Usage in CSS with css-loader & style-loader

In webpack config:

module: {
    loaders: [
        {
            test: /img\.in/,
            loader: 'imgin-loader'
        },
        {
            test: /\.css/,
            loader: 'style-loader!css-loader'
        }
        ...
    ]
}

In css:

<css-selector> {
  background: url('~imgin-loader/img.in?text=My%20Image&bg=aeaeae&color=3c3c3c');
}

In javascript:

var styles = require('path/to/css/file.css');

Acknowledgment

The fonts used in this project are parsed bitmap fonts derived from Fjalla One fonts copyright (c) 2012 by Sorkin Type Co (www.sorkintype.com).

The copyright notice and the license are provided as plain text in fonts/OFL.txt. The license is also available with a FAQ at: http://scripts.sil.org/OFL