<input type=file>からQRコードをスキャン【jsQR】

See the Pen scan QR code from <input type=file> by John Doe (@04) on CodePen.

async function scanQRFromFile(file) {
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await new Promise((resolve) => img.addEventListener("load", resolve));
  const canvas = document.createElement("canvas");
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight);
  return jsQR(imageData.data, img.naturalWidth, img.naturalHeight)?.data;
}

document.querySelector("input").addEventListener("change", async (e) => {
  const code = await scanQRFromFile(e.target.files[0]);
  document.write(code);
});

OffscreenCanvasを使う場合

See the Pen scan QR code from <input type=file> by John Doe (@04) on CodePen.

async function scanQRFromFile(file) {
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await new Promise((resolve) => img.addEventListener("load", resolve));
  const canvas = new OffscreenCanvas(img.naturalWidth, img.naturalHeight);
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight);
  return jsQR(imageData.data, img.naturalWidth, img.naturalHeight)?.data;
}

document.querySelector("input").addEventListener("change", async (e) => {
  const code = await scanQRFromFile(e.target.files[0]);
  document.write(code);
});

QR画像の周りにパディングとホワイト背景をつける場合

See the Pen scan QR code from <input type=file> with OffscreenCanvas by John Doe (@04) on CodePen.

import jsQR from "https://cdn.skypack.dev/jsqr@1.4.0";

async function scanQRFromFileWithPaddingAndWhiteBackground(file, padding = 32) {
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await new Promise((resolve) => img.addEventListener("load", resolve));
  const width = img.naturalWidth + padding * 2;
  const height = img.naturalHeight + padding * 2;
  const canvas = new OffscreenCanvas(width, height);
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, width, height);
  ctx.drawImage(img, padding, padding);
  const imageData = ctx.getImageData(0, 0, width, height);
  return jsQR(imageData.data, width, height)?.data;
}

document.querySelector("input").addEventListener("change", async (e) => {
  const code = await scanQRFromFileWithPaddingAndWhiteBackground(e.target.files[0]);
  document.write(code);
});

画像を貼り付ける場合

See the Pen scan QR code from <input type=file> with Ctrl + V by John Doe (@04) on CodePen.

async function scanQRFromFile(file) {
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await new Promise((resolve) => img.addEventListener("load", resolve));
  const canvas = new OffscreenCanvas(img.naturalWidth, img.naturalHeight);
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight);
  return jsQR(imageData.data, img.naturalWidth, img.naturalHeight)?.data;
}

addEventListener("paste", async (e) => {
  const code = await scanQRFromFile(e.clipboardData.files[0]);
  document.write(code);
});