🎉 Initial

Author: mcnaveen

.github/workflows/test.yml

@@ -0,0 +1,20 @@
+name: Test
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/[email protected]
+      - uses: actions/[email protected]
+        with:
+          node-version: "14.x"
+      - name: use npm
+        run: |
+          npm install
+          npm test

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

.npmignore

@@ -0,0 +1,6 @@
+/node_modules
+.github
+/test
+/image
+/dist
+renovate.json

README.md

@@ -0,0 +1,79 @@
+# Generate Blurhash from Image URL
+
+:unicorn: Simple utility to generate blurhash from Image URL
+
+![Test](https://github.com/mcnaveen/blurhash-from-url/workflows/Test/badge.svg)
+![Downloads this Week](https://img.shields.io/npm/dw/blurhash-from-url)
+![Bundle Size](https://img.shields.io/bundlephobia/min/blurhash-from-url)
+![Version](https://img.shields.io/npm/v/blurhash-from-url)
+
+![Blurhash from URL](./image/cover.png)
+
+### :package: Requirements
+
+- Node.js 16X LTS or Higher 📦
+
+### :sparkles: Installation
+
+- Install the NPM Package with the below command:
+
+```
+npm install blurhash-from-url --save
+```
+
+(or)
+
+- Install with Yarn:
+
+```
+yarn add blurhash-from-url
+```
+
+### :bulb: Usage Example
+
+- Import it in your project
+- Pass the URL of the image
+- Make sure to use Async/Await function
+
+```javascript
+//ES6 Import
+import { blurhashFromURL } from "blurhash-from-url";
+
+// Commonjs Import
+// const { blurhashFromURL } = require("blurhash-from-url");
+
+async function getBlurhash() {
+  const output = await blurhashFromURL("https://i.imgur.com/NhfEdg2.png");
+  console.log(output);
+}
+
+getBlurhash();
+```
+
+### :ballot_box_with_check: Example Output
+
+```json
+{
+  encoded: 'UnR.*,kW.TnPt7WBocozpJV@nMkWadofWCV@',
+  decoded: Uint8ClampedArray(1440000) [
+    255, 255, 251, 255, 255, 255, 251, 255, 255, 255, 251, 255,
+    255, 255, 251, 255, 255, 255, 251, 255, 255, 255, 251, 255,
+    255, 255, 251, 255, 255, 255, 251, 255, 255, 255, 251, 255,
+    255, 255, 251, 255, 255, 255, 250, 255, 255, 255, 250, 255,
+    255, 255, 250, 255, 255, 255, 250, 255, 255, 255, 250, 255,
+    255, 255, 250, 255, 255, 255, 250, 255, 255, 255, 250, 255,
+    255, 255, 250, 255, 255, 255, 250, 255, 255, 255, 250, 255,
+    255, 255, 250, 255, 255, 255, 250, 255, 255, 255, 250, 255,
+    255, 255, 250, 255,
+    ... 1439900 more items
+  ],
+  width: 600,
+  height: 600
+}
+```
+
+---
+
+#### :green_heart: Message
+
+I hope you find this useful. If you have any questions, please create an issue.

image/cover.png

@@ -0,0 +1,48 @@
+{
+  "name": "blurhash-from-url",
+  "version": "0.0.4",
+  "description": "Simple utility to generate blurhash from Image URL",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.esm.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "yarn build && node ./test/index.js",
+    "watch": "rollup -cw"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.27.2",
+    "blurhash": "^1.1.5",
+    "sharp": "^0.30.7"
+  },
+  "devDependencies": {
+    "@types/sharp": "^0.30.5",
+    "rollup": "^2.78.1",
+    "rollup-plugin-typescript2": "^0.33.0",
+    "typescript": "^4.8.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mcnaveen/blurhash-from-url.git"
+  },
+  "author": "mcnaveen <[email protected]>",
+  "bugs": {
+    "url": "https://github.com/mcnaveen/blurhash-from-url/issues"
+  },
+  "homepage": "https://github.com/mcnaveen/blurhash-from-url#readme",
+  "keywords": [
+    "blurhash",
+    "optimization",
+    "bundle",
+    "sharp",
+    "plaiceholder",
+    "blurhash-from-url"
+  ]
+}

package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

renovate.json

@@ -0,0 +1,17 @@
+import typescript from "rollup-plugin-typescript2";
+
+import pkg from "./package.json";
+
+export default {
+  input: "src/index.ts",
+  output: [
+    { file: pkg.main, format: "cjs" },
+    { file: pkg.module, format: "es" },
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+
+  plugins: [typescript({ typescript: require("typescript") })],
+};

rollup.config.js

@@ -0,0 +1,34 @@
+import get from "axios";
+import { encode, decode } from "blurhash";
+import sharp from 'sharp';
+
+export const blurhashFromURL = async (url: string) => {
+    const image = await get(url, {
+        responseType: "arraybuffer",
+    });
+    const returnedBuffer = Buffer.from(image.data);
+
+    const { data, info } = await sharp(returnedBuffer)
+        .ensureAlpha()
+        .raw()
+        .toBuffer({
+            resolveWithObject: true,
+        });
+    const encoded = encode(
+        new Uint8ClampedArray(data),
+        info.width,
+        info.height,
+        4,
+        4
+    );
+    const decoded = decode(encoded, info.width, info.height);
+
+    const output = {
+        encoded: encoded,
+        decoded: decoded,
+        width: info.width,
+        height: info.height,
+    };
+
+    return output;
+};

src/index.ts

@@ -0,0 +1,8 @@
+const { blurhashFromURL } = require("../dist/cjs/index.js");
+
+async function getBlurhash() {
+  const output = await blurhashFromURL("https://i.imgur.com/NhfEdg2.png");
+  console.log(output);
+}
+
+getBlurhash();