Open CV Tools

Perspective correcting, rotating, I/O, web workers

Where do I get OpenCV?

opencv-tools generally (except for I/O functions) receives a cv object as a parameter. So, you have a couple of options:

• OpenCV CDN (details, source)
• Your own copy of opencv.js
• use-cv (React-only)
• opencv-ts

Note on types

If you're using your own copy or a CDN, consider declaring types manually:

// cv.d.ts
import { Cv } from 'use-cv'
declare global {
  const cv: Cv
}

I/O

import cv from 'opencv-ts' // or whatever
import { io } from 'opencv-tools'

const data: ImageData = await io.read('image.jpg') // no, you don't need opencv for this
const mat = cv.matFromImageData(data)
const blob = await io.writeBlob(mat, 'jpg')
const outData = await io.toData(mat)

// and more!

Web Workers

Perspective Correction

Requiers installing a peer dep: @haskellian/async

yarn add @haskellian/async

npm i @haskellian/async

• worker.ts:

  import cv from "opencv-ts"; // or importScripts to a custom opencv.js, or whatever
  import { onMessage } from 'opencv-tools/workers/correct'
  onmessage = onMessage(cv)

• MyComponent.tsx|js|... (I'm doing this in React, but it should work anywhere):

    import { prepareWorker } from 'opencv-tools/workers/correct'
  
    const worker = new Worker('/path/to/worker.ts')
    const api = prepareWorker(worker)
  
    const img = '/image.jpg'
  
    function initialize() {
      api.postImg(img) // not necessary, but makes subsequent calls faster
    }
  
    async function correct(corners: Corners) {
      const blob = await api.correct(img, corners)
      ...
    }

Serialization/Deserialization

Only in case you want to work with ImageData/cv.Mat on both the UI thread and a worker. Otherwise, it's generally simpler to pass Blobs around

// Main.tsx
import { io } from 'opencv-tools'
import { serialize } from 'opencv-tools/workers'

const worker = new Worker('/path/to/worker.ts')
const img: ImageData = await io.read('image.jpg')
worker.postMessage(...serialize(img))

// worker.ts
importScripts('/opencv.js') // or CDN, or `opencv-ts`, etc. Up to you
import { serialize, deserialize } from 'opencv-tools/dist/workers'

onmessage = e => {
  const imgData: ImageData = deserialize(e.data)
  const mat = cv.matFromImageData(imgData)
  ...
  const result = serialize(mat)
  mat.delete()
  self.postMessage(...result)
}