heic-to 1.0.0

package/esbuild.mjs

@@ -0,0 +1,64 @@
+import * as esbuild from 'esbuild';
+import fs from 'fs'
+
+// Build heic-to.js
+
+await esbuild.build({
+  entryPoints: [
+    'src/worker.js'
+  ],
+  bundle: true,
+  minify: false,
+  target: 'es6',
+  platform: 'browser',
+  outfile: 'tmp/worker.js',
+  external: ['fs', 'path']
+});
+
+const workerFileContent = fs.readFileSync('tmp/worker.js', 'utf8')
+
+esbuild.build({
+  entryPoints: [
+    'src/index.js'
+  ],
+  bundle: true,
+  minify: false,
+  target: 'es6',
+  platform: 'browser',
+  outfile: 'dist/heic-to.js',
+  format: 'esm',
+  define: {
+    WORKER_FILE_CONTENT: JSON.stringify(workerFileContent)
+  }
+});
+
+// Build heic-to.min.js
+
+await esbuild.build({
+  entryPoints: [
+    'src/worker.js'
+  ],
+  bundle: true,
+  minify: true,
+  target: 'es6',
+  platform: 'browser',
+  outfile: 'tmp/worker.min.js',
+  external: ['fs', 'path']
+});
+
+const workerFileMinifyContent = fs.readFileSync('tmp/worker.min.js', 'utf8')
+
+esbuild.build({
+  entryPoints: [
+    'src/index.js'
+  ],
+  bundle: true,
+  minify: true,
+  target: 'es6',
+  platform: 'browser',
+  outfile: 'dist/heic-to.min.js',
+  format: 'esm',
+  define: {
+    WORKER_FILE_CONTENT: JSON.stringify(workerFileMinifyContent)
+  }
+});

package/example/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>heic-to</title>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center; 
+      flex-direction: column;
+      height: 100vh;
+    }
+    input {
+      border: 1px solid black;
+      padding: 10px;
+    }
+    label {
+        display: block;;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        color: red;
+    }
+    .images {
+      width: 200px;
+      height: 200px;
+    }
+    img {
+      display: block;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+
+  <h1>heic-to</h1>
+
+  <main>
+    <input type="file">
+    <label></label>
+    <div class="images"></div>
+  </main>
+
+  <script type="module">
+    import {heicTo, isHeic} from '../dist/heic-to.js'
+
+    const imagesContainer = document.querySelector(".images")
+    const messageLabel = document.querySelector("label")
+    const field = document.querySelector("input")
+
+    field.addEventListener('change', async (event) => {
+
+      let imageDom = document.querySelector("img")
+      if (!imageDom) {
+        imageDom = document.createElement('img')
+        imagesContainer.appendChild(imageDom)
+      }
+      imageDom.src = ''
+      imageDom.alt = "Loading..."
+      messageLabel.textContent = "Loading..."
+
+      const image = field.files[0]
+      if (await isHeic(image)) {
+        messageLabel.textContent = "It's a HEIC image"
+        const heifImage = await heicTo({blob: image, type: 'image/jpeg', quality: 0.5})
+        imageDom.src = URL.createObjectURL(heifImage)
+      } else {
+        messageLabel.textContent = "It's not a HEIC image"
+        imageDom.src = URL.createObjectURL(image)
+      }
+
+    })
+  </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "heic-to",
+  "version": "1.0.0",
+  "description": "Converting HEIF/HEIF image formats to PNG/JPEG in the browser",
+  "main": "dist/heic-to.js",
+  "scripts": {
+    "build": "node esbuild.mjs",
+    "s": "npx http-server -o ./example"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hoppergee/heic-to.git"
+  },
+  "keywords": [
+    "heic", "heif", "jpeg", "jpg", "png", "conversion", "convert", "image", "decoder"
+  ],
+  "author": "Hopper Gee",
+  "license": "LGPL-3.0",
+  "homepage": "https://github.com/hoppergee/heic-to",
+  "devDependencies": {
+    "esbuild": "0.23.0",
+    "http-server": "^14.1.1"
+  }
+}

package/src/index.js

@@ -0,0 +1,75 @@
+
+const isHeic = async (file) => {
+  const buffer = await file.arrayBuffer()
+  const slicedBuffer = buffer.slice(8, 12)
+  const brandMajor = new TextDecoder('utf-8')
+    .decode(slicedBuffer)
+    .replace('\0', ' ')
+    .trim();
+
+  switch (brandMajor) {
+    case 'mif1':
+      return true; // {ext: 'heic', mime: 'image/heif'};
+    case 'msf1':
+      return true; // {ext: 'heic', mime: 'image/heif-sequence'};
+    case 'heic':
+    case 'heix':
+      return true; // {ext: 'heic', mime: 'image/heic'};
+    case 'hevc':
+    case 'hevx':
+      return true; // {ext: 'heic', mime: 'image/heic-sequence'};
+  }
+
+  return false;
+};
+
+const workerFileContent = WORKER_FILE_CONTENT
+const workerBlob = new Blob([workerFileContent], {type: 'application/javascript'})
+const worker = new Worker(URL.createObjectURL(workerBlob))
+
+const decodeBuffer = async (buffer) => {
+	return new Promise((resolve, reject) => {
+		const id = (Math.random() * new Date().getTime()).toString();
+		const message = { id, buffer };
+    worker.postMessage(message);
+    worker.addEventListener(
+			"message",
+			(message) => {
+				if (message.data.id === id) {
+					if (message.data.error) {
+						return reject(message.data.error);
+					}
+					return resolve(message.data.imageData);
+				}
+			}
+		);
+	});
+}
+
+const encodeByCanvas = async (imageBuffer) => {
+  const imageData = await decodeBuffer(imageBuffer)
+
+  const canvas = document.createElement('canvas');
+  canvas.width = imageData.width;
+  canvas.height = imageData.height;
+
+  const ctx = canvas.getContext('2d')
+  ctx.putImageData(imageData, 0, 0)
+  return canvas;
+};
+
+const heicTo = async ({blob, type, quality}) => {
+  const imageBuffer = await blob.arrayBuffer()
+  const canvas = await encodeByCanvas(imageBuffer);
+  return await new Promise((resolve, reject) => canvas.toBlob(blob => {
+    if (blob != null)
+      resolve(blob);
+    else
+      reject(`Can't convert canvas to blob.`);
+  }, type, quality));
+};
+
+export {
+  isHeic,
+  heicTo
+}