imgix-core-js is an npm and Bower package that provides the common boilerplate for imgix server and client-side JavaScript-based functionality.
imgix-core-js adheres to the imgix-blueprint for definitions of its functionality.
imgix-core-js can be installed as either via npm or via bower:
$ npm install --save imgix-core-js
or
$ bower install --save imgix-core-js
Depending on your module system, using imgix-core-js is done a few different ways. The most common entry point will be the Client class. Whenever you provide data to imgix-core-js, make sure it is not already URL-encoded, as the library handles proper encoding internally.
var ImgixClient = require('imgix-core-js');
var client = new ImgixClient({
domains: "my-social-network.imgix.net",
secureURLToken: "<SECURE TOKEN>"
});
var url = client.buildURL("/path/to/image.png", {
w: 400,
h: 300
});
console.log(url); // => "https://my-social-network.imgix.net/users/1.png?w=400&h=300&s=…"import ImgixClient from 'imgix-core-js'
let client = new ImgixClient({
domains: 'my-social-network.imgix.net',
secureURLToken: '<SECURE TOKEN>'
});
let url = client.buildURL('/path/to/image.png', { w: 400, h: 300 });
console.log(url); // => 'https://my-social-network.imgix.net/users/1.png?w=400&h=300&s=…'var client = new ImgixClient({
domains: 'my-social-network.imgix.net'
// Do not use signed URLs with `secureURLToken` on the client side,
// as this would leak your token to the world. Signed URLs should
// be generated on the server.
});
var url = client.buildURL('/path/to/image.png', { w: 400, h: 300 });
console.log(url); // => "https://my-social-network.imgix.net/users/1.png?w=400&h=300"Warning: Domain Sharding has been deprecated and will be removed in the next major release
To find out more, see our blog post explaining the decision to remove this feature.
Domain sharding enables you to spread image requests across multiple domains. This allows you to bypass the requests-per-host limits of browsers. We recommend 2-3 domain shards maximum if you are going to use domain sharding.
In order to use domain sharding, you need to add multiple domains to your
source. You then provide a list of these domains to ImgixClient.
var ImgixClient = require('imgix-core-js');
var client = new ImgixClient({
domains: ["demos-1.imgix.net", "demos-2.imgix.net", "demos-3.imgix.net"]
});
var url = client.buildURL("/bridge.png", {w: 100, h: 100});
console.log(url); // => "http://demos-2.imgix.net/bridge.png?h=100&w=100"
var url = client.buildURL("/flower.png", {w: 100, h: 100});
console.log(url); // => "http://demos-3.imgix.net/flower.png?h=100&w=100"By default, shards are calculated using a checksum so that the image path always resolves to the same domain. This improves caching in the browser. However, you can supply a different strategy that cycles through domains instead. For example:
var ImgixClient = require('imgix-core-js');
var client = new ImgixClient({
domains: ["demos-1.imgix.net", "demos-2.imgix.net", "demos-3.imgix.net"],
shard_strategy: ImgixClient.SHARD_STRATEGY_CYCLE
});
for(i=0; i<4; i++)
console.log(client.buildURL("/bridge.png", {w: 100, h: 100}));
// Prints out:
// http://demos-1.imgix.net/bridge.png?h=100&w=100
// http://demos-2.imgix.net/bridge.png?h=100&w=100
// http://demos-3.imgix.net/bridge.png?h=100&w=100
// http://demos-1.imgix.net/bridge.png?h=100&w=100For security and diagnostic purposes, we sign all requests with the language and version of library used to generate the URL.
This can be disabled by passing a falsy value for the includeLibraryParam option to new ImgixClient:
new ImgixClient({
domains: 'my-source.imgix.net',
includeLibraryParam: false
});imgix-core-js uses mocha for testing. Here’s how to run those tests:
npm test
To publish a new version of the NPM package:
$ npm publishThe Bower package will be automatically updated when you create a new release in GitHub.