This is basically just a port of the TypeScript blurhash implementation for pure JavaScript (ES6) with added helper functions to generate Image objects from decoded blurhashes that can be appended to the DOM directly.
TypeScript implementation: https://github.com/woltapp/blurhash/tree/master/TypeScript
More infos on blurhash: https://blurha.sh/
See demo.html for sample usage of encode and decode.
You can use the minified version:
<script src="blurhash_pure_js_port.min.js"></script>
/**
* @param {String} blurhash
* @param {Number} width
* @param {Number} height
* @param {Number} punch
* @returns {Promise<Uint8ClampedArray>}
*/
blurhash.decodePromise(blurhash, width, height, punch);
/**
* @param {String} blurhash
* @param {Number} width
* @param {Number} height
* @param {Number} punch
* @returns {Uint8ClampedArray}
*/
blurhash.decode(blurhash, width, height, punch);/**
* @param {Uint8ClampedArray} pixels
* @param {Number} width
* @param {Number} height
* @param {Number} componentX
* @param {Number} componentY
* @returns {Promise<String>}
*/
blurhash.encodePromise(pixels, width, height, componentX, componentY);
/**
* @param {Uint8ClampedArray} pixels
* @param {Number} width
* @param {Number} height
* @param {Number} componentX
* @param {Number} componentY
* @returns {String}
*/
blurhash.encode(pixels, width, height, componentX, componentY);/**
* @param {Image} img
* @returns {Uint8ClampedArray}
*/
blurhash.getImageData(img);/**
* @param {Image} img
* @param {Number} width
* @param {Number} height
* @returns {HTMLCanvasElement}
*/
blurhash.drawImageDataOnNewCanvas(imgData, width, height);/**
* @param {Uint8ClampedArray} imgData
* @param {Number} width
* @param {Number} height
* @param {function} onload on image load
*/
blurhash.getImageDataAsImage(imgData, width, height, onload);/**
* @param {Uint8ClampedArray} imgData
* @param {Number} width
* @param {Number} height
* @returns {Promise<Image>}
*/
blurhash.getImageDataAsImageWithOnloadPromise(imgData, width, height);