doc: add example using modules from unpkg cdn

Fixes #35, thanks for the suggestion @josephrocca
jamsinclair · Nov 9, 2023 · 76d3d1c · 76d3d1c
1 parent 9f2d612
commit 76d3d1c
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -28,6 +28,26 @@ jSquash name is inspired by jQuery and Squoosh. It symbolizes the browser suppor
 
 ⚠️ All packages are ESM modules. You may need to manually transpile the packages if your build environment still relies on Commonjs formats.
 
+## Usage in the Browser
+
+You can use the packages directly from the Unpkg CDN and can be the easiest way to get started.
+
+```js
+import { decode } from "https://unpkg.com/@jsquash/jpeg?module";
+import { encode } from "https://unpkg.com/@jsquash/webp?module";
+
+const imageResponse = await fetch("https://picsum.photos/200/300.jpg");
+const imageData = await decode(await imageResponse.arrayBuffer());
+const webpImageBuffer = await encode(imageData);
+```
+
+To target a specific version, you can use the `@version` syntax.
+```js
+import { encode } from "https://unpkg.com/@jsquash/webp@1.2.0?module";
+```
+
+Checkout the [with CDN](/examples/with-cdn) example for a working demo.
+
 ## Usage in Cloudflare Workers
 
 Using jSquash modules with Cloudflare Workers requires some additional steps so that the WASM binaries get included.

diff --git a/examples/with-cdn/index.html b/examples/with-cdn/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>jSquash with Rollup example</title>
+</head>
+<body>
+  <h1>Image Converter</h1>
+  <form>
+    <label>
+      Choose your source image:
+      <input type="file" name="file" accept=".avif,.jxl,image/*">
+    </label>
+    <p>Choose output image type:</p>
+    <div>
+      <label>
+        <input type="radio" name="outputType" value="avif" checked> AVIF
+      </label>
+      <label>
+        <input type="radio" name="outputType" value="jpeg" checked> JPEG
+      </label>
+      <label>
+        <input type="radio" name="outputType" value="jxl" checked> JPEG XL
+      </label>
+      <label>
+        <input type="radio" name="outputType" value="png" checked> PNG
+      </label>
+      <label>
+        <input type="radio" name="outputType" value="webp" checked> WebP
+      </label>
+    </div>
+    <button>Convert</button>
+  </form>
+  <p>Output Image (Right click to save)</p>
+  <div id="preview"></div>
+  <script type="module" src="./main.js"></script>
+</body>
+</html>
diff --git a/examples/with-cdn/main.js b/examples/with-cdn/main.js
@@ -0,0 +1,83 @@
+import * as avif from 'https://unpkg.com/@jsquash/avif@latest?module';
+import * as jpeg from 'https://unpkg.com/@jsquash/jpeg@latest?module';
+import * as jxl from 'https://unpkg.com/@jsquash/jxl@latest?module';
+import * as png from 'https://unpkg.com/@jsquash/png@latest?module';
+import * as webp from 'https://unpkg.com/@jsquash/webp@latest?module';
+
+async function decode (sourceType, fileBuffer) {
+  switch (sourceType) {
+    case 'avif':
+      return await avif.decode(fileBuffer);
+    case 'jpeg':
+      return await jpeg.decode(fileBuffer);
+    case 'jxl':
+      return await jxl.decode(fileBuffer);
+    case 'png':
+      return await png.decode(fileBuffer);
+    case 'webp':
+      return await webp.decode(fileBuffer);
+    default:
+      throw new Error(`Unknown source type: ${sourceType}`);
+  }
+}
+
+async function encode (outputType, imageData) {
+  switch (outputType) {
+    case 'avif':
+      return await avif.encode(imageData);
+    case 'jpeg':
+      return await jpeg.encode(imageData);
+    case 'jxl':
+      return await jxl.encode(imageData);
+    case 'png':
+      return await png.encode(imageData);
+    case 'webp':
+      return await webp.encode(imageData);
+    default:
+      throw new Error(`Unknown output type: ${outputType}`);
+  }
+}
+
+async function convert (sourceType, outputType, fileBuffer) {
+  const imageData = await decode(sourceType, fileBuffer);
+  return encode(outputType, imageData);
+}
+
+function blobToBase64(blob) {
+  return new Promise((resolve, _) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function showOutput (imageBuffer, outputType) {
+  const preview = document.querySelector('#preview');
+  const imageBlob = new Blob([imageBuffer], { type: `image/${outputType}` });
+  const base64String = await blobToBase64(imageBlob);
+  const previewImg = document.createElement('img');
+  previewImg.src = base64String;
+  preview.innerHTML = '';
+  preview.appendChild(previewImg);
+}
+
+async function initForm () {
+  const form = document.querySelector('form');
+
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const formData = new FormData(form);
+    const file = formData.get('file');
+    const sourceType = file.name.endsWith('jxl') ? 'jxl' : file.type.replace('image/', '');
+    const outputType = formData.get('outputType');
+    const fileBuffer = await file.arrayBuffer();
+    const imageBuffer = await convert(sourceType, outputType, fileBuffer);
+    showOutput(imageBuffer, outputType);
+  });
+}
+
+async function main () {
+  initForm();
+}
+
+main();