JSFiddle - React, Tailwind, and code Playground

by s_yoshiki

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.css">
<script src="https://docs.opencv.org/4.1.0/opencv.js"></script>

<main class="markdown-body">
    <canvas id="input" width="320" height="320"></canvas>
    <canvas id="output" width="320" height="320"></canvas>
    <p>
      <input id="file" type="file" accept='image/*' />
    </p>
    <hr>
    <button id="grayscale">grayscale</button>
    <button id="threshold">threshold</button>
    <button id="canny">canny</button>
    <button id="find-contours">findContours</button>
    <button id="gaussian">gaussian</button>
</main>

CSS

canvas {
    background-color: #f3f3f3;
}

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  color: #24292e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
  word-wrap: break-word;
}

.markdown-body .pl-c {
  color: #6a737d;
}

JavaScript

const srcCanvasId = 'input'
const dstCanvasId = 'output'
const lenna = "https://i.imgur.com/sRpRCnA.png"

const resolveImage = (canvas, file) => {
  return new Promise((resolve, reject) => {
    const ctx = canvas.getContext("2d");
    const image = new Image();
    const reader = new FileReader();
    reader.onload = e => {
      image.onload = () => {
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        resolve(image);
      }
      image.src = e.target.result;
    }
    reader.readAsDataURL(file);
  });
}

async function loadImage(file) {
	let canvas = document.getElementById(srcCanvasId)
	await resolveImage(canvas, file)
}

document.getElementById('file').addEventListener('change', (e) => {
	let file = e.target.files[0]
    loadImage(file)
}, false);

const initDefaultImage = () => {
	const canvas = document.getElementById(srcCanvasId)
    const ctx = canvas.getContext("2d")
	let image = new Image()
	image.crossOrigin = "anonymous";
    image.src = lenna
    image.onload = () => {
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    }
}
initDefaultImage()

document.getElementById('grayscale').addEventListener('click', (e) => {
	let src = cv.imread(srcCanvasId)
    let dst = new cv.Mat()
    cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0)
    cv.imshow(dstCanvasId, dst)
})

document.getElementById('threshold').addEventListener('click', (e) => {
	let src = cv.imread(srcCanvasId)
    let dst = new cv.Mat()
    let gray = new cv.Mat()
    cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0)
    cv.threshold(gray, dst, 126, 255, 1)
    cv.imshow(dstCanvasId, dst)
})

document.getElementById('canny').addEventListener('click', (e) => {
	let src = cv.imread(srcCanvasId)
    let dst = new cv.Mat()
    let gray = new cv.Mat()
    cv.Canny(src, dst, 100,200)
    cv.imshow(dstCanvasId, dst)
})

document.getElementById('find-contours').addEventListener('click', (e) => {
	let src = cv.imread(srcCanvasId)
    let dst = cv.Mat.zeros(src.rows,...