blurhash_service

blur-hash-service is a wrapper around the website and api: blur-hash.com

You can get your free api key by signing up here: blur-hash.com/login

React-blurhash has a DEMO you can view here

For rendering the blurhash on the front end you can use the below libraries:

React Component: react-blurhash

React Native: react-native-blurhash

Getting started:

npm install blurhash_service

yarn add blurhash_service

Methods:

blurByImage:

const blurhash = require('blurhash_service');

blurhash.config({ apiKey: 'YOUR_API_KEY' });

const options = {
  'pathToImage': './test/test_image.png',
  'quality':     2,
};

async function init() {
  const { data } = await blurhash.blurByImage(options);

  console.log(data);
  // output
  // {
  //   message: 'Success',
  //   id: '5a298b61-bcfa-4b3a-a647-b984e6e04364',
  //   hash: 'AQI|Z}$%~Toy'
  // }
}

init();

blurByBase64:

const blurhash = require('blurhash_service');

blurhash.config({ apiKey: 'YOUR_API_KEY' });

const options = {
  'value':   'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',
  'quality': 2,
};

async function init() {
  const { data } = await blurhash.blurByBase64(options);

  console.log(data);
  // output
  //  {
  //    message: 'Success',
  //    id:      '0c6e9803-22ac-4cb9-9990-eaf7dfd12542',
  //    hash:    'AL8Nwo~q~q~q'
  //  }
}

init();

blurByURL

const blurhash = require('blurhash_service');

blurhash.config({ apiKey: 'YOUR_API_KEY' });

const options = {
  'value':   'https://picsum.photos/100.jpg',
  'quality': 2,
};

async function init() {

  const { data } = await blurhash.blurByUrl(options);

  console.log(data);
  // output
  //  {
  //    message: 'Success',
  //    id:      '0c6e9803-22ac-4cb9-9990-eaf7dfd12542',
  //    hash:    'AfFrt]E2~qNH'
  //  }
};

init();

getBlurById

const blurhash = require('blurhash_service');

blurhash.config({ apiKey: 'YOUR_API_KEY' });

const validBlurId = '0c6e9803-22ac-4cb9-9990-eaf7dfd12542';

async function init() {

  const { data } = await blurhash.getBlurById(validBlurId);

  console.log(data);
  // output
  //  {
  //    message: 'Success',
  //    hash:    'L~LW#Xv}f,WqPqOYWAj[M{f,nhn$'
  //  }
};

init();

listBlur

const blurhash = require('blurhash_service');

blurhash.config({ apiKey: 'YOUR_API_KEY' });

async function init() {

  const { data } = await blurhash.listBlur();

  console.log(data);
  // output
  //  {
  //    'message': 'Success',
  //    'hashs': [
  //      {
  //        'id': '4a925972-9021-43e0-bc17-30b03629f649',
  //        'hash': 'A27Ko8xu~qj['
  //      },
  //      {
  //        'id': 'a5659686-585e-488f-b88e-2df04a22bff4',
  //        'hash': 'A5G*mD.9~3xv'
  //      }
  //    ]
  //  }
};

init();

batchBlurByImage:

const blurhash = require('blurhash_service');

blurhash.config({ apiKey: 'YOUR_API_KEY' });

const validBlurArray = [
  {
    "value": "https://picsum.photos/100.jpg",
    "quality": "2",
  },
  {
    "value": "https://picsum.photos/100.jpg",
    "quality": "2",
  }
];

async function init() {
  const { data } = await blurhash.batchBlurByImage(validBlurArray);

  console.log(data);
  // output
  //  {
  //    message: 'Success',
  //    hashs: [
  //      {
  //        'hash': 'AL8Nwo~q~q~q',
  //        'id':   '0c6e9803-22ac-4cb9-9990-eaf7dfd12542'
  //      },
  //      {
  //        'hash': 'AL8Nwo~q~q~q',
  //        'id':   '0c6e9803-22ac-4cb9-9990-eaf7dfd12542'
  //      }
  //    ]
  //  }
}

init();

batchBlurByBase64:

const blurhash = require('blurhash_service');

blurhash.config({ apiKey: 'YOUR_API_KEY' });

const validBlurArray = [
  {
    "value":   "R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
    "quality": 2
  },
  {
    "value":   "R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
    "quality": 2
  }
];

async function init() {
  const { data } = await blurhash.batchBlurByBase64(validBlurArray);

  console.log(data);
  // output
  //  {
  //    message: 'Success',
  //    hashs: [
  //      {
  //        'hash': 'AL8Nwo~q~q~q',
  //        'id':   '0c6e9803-22ac-4cb9-9990-eaf7dfd12542'
  //      },
  //      {
  //        'hash': 'AL8Nwo~q~q~q',
  //        'id':   '0c6e9803-22ac-4cb9-9990-eaf7dfd12542'
  //      }
  //    ]
  //  }
}

init();