heic-to 1.2.2 → 1.3.0

package/example/bitmap/app.js

@@ -0,0 +1,28 @@
+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 canvasDom = document.querySelector("canvas")
+  if (!canvasDom) {
+    canvasDom = document.createElement('canvas')
+    imagesContainer.appendChild(canvasDom)
+  }
+
+  const image = field.files[0]
+  if (await isHeic(image)) {
+    messageLabel.textContent = "It's a HEIC image"
+    const bitmapImage = await heicTo({blob: image, type: 'bitmap', options: {imageOrientation: 'flipY'}})
+    const ctx = canvasDom.getContext('2d')
+    canvasDom.width = bitmapImage.width
+    canvasDom.height = bitmapImage.height
+    ctx.drawImage(bitmapImage, 0, 0)
+  } else {
+    messageLabel.textContent = "It's not a HEIC image"
+    canvasDom.remove()
+  }
+
+})

package/example/bitmap/index.html

@@ -0,0 +1,47 @@
+<!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>
+  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, post-check=0, pre-check=0">
+  <script src="./app.js" type="module"></script>
+</head>
+<body>
+
+  <h1>heic-to</h1>
+
+  <main>
+    <input type="file">
+    <label></label>
+    <div class="images"></div>
+  </main>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heic-to",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Converting HEIF/HEIF image formats to PNG/JPEG in the browser",
   "main": "dist/heic-to.js",
   "exports": {

package/src/index.js

@@ -79,23 +79,29 @@ const releaseCanvas = (canvas) => {
     ctx && ctx.clearRect(0, 0, 1, 1);
 }
 
-const heicTo = async ({blob, type, quality}) => {
-  const imageBuffer = await blob.arrayBuffer()
-  let canvas;
-  try {
-    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));
-  } finally {
-    if (canvas) releaseCanvas(canvas);
+const heicTo = async ({blob, type, quality, options}) => {
+  if (type == "bitmap") {
+    const imageBuffer = await blob.arrayBuffer();
+    const imageData = await decodeBuffer(imageBuffer);
+    return createImageBitmap(imageData, options);
+  } else {
+    const imageBuffer = await blob.arrayBuffer()
+    let canvas;
+    try {
+      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));
+    } finally {
+      if (canvas) releaseCanvas(canvas);
+    }
   }
 };
 
 export {
   isHeic,
-  heicTo
+  heicTo,
 }

package/src/next/index.js

@@ -77,34 +77,29 @@ const releaseCanvas = (canvas) => {
     ctx && ctx.clearRect(0, 0, 1, 1);
 }
 
-const heicTo = async ({blob, type, quality}) => {
-  const imageBuffer = await blob.arrayBuffer()
-  let canvas;
-  try {
-    canvas = await encodeByCanvas(imageBuffer);
-
-    return await new Promise((resolve, reject) => {
-
-      canvas.convertToBlob({
-        type: type,
-        quality: quality,
-      }).then(blob => {
-        if (blob) {
+const heicTo = async ({blob, type, quality, options}) => {
+  if (type == "bitmap") {
+    const imageBuffer = await blob.arrayBuffer();
+    const imageData = await decodeBuffer(imageBuffer);
+    return createImageBitmap(imageData, options);
+  } else {
+    const imageBuffer = await blob.arrayBuffer()
+    let canvas;
+    try {
+      canvas = await encodeByCanvas(imageBuffer);
+      return await new Promise((resolve, reject) => canvas.toBlob(blob => {
+        if (blob != null)
           resolve(blob);
-        } else {
+        else
           reject(`Can't convert canvas to blob.`);
-        }
-      }).catch(error => {
-        reject(`Can't convert canvas to blob.`);
-      })
-
-    });
-  } finally {
-    if (canvas) releaseCanvas(canvas);
+      }, type, quality));
+    } finally {
+      if (canvas) releaseCanvas(canvas);
+    }
   }
 };
 
 export {
   isHeic,
-  heicTo
+  heicTo,
 }