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

$3

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

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

`

I/O

`typescript
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

$3

> Requiers installing a peer dep: @haskellian/async

`
yarn add @haskellian/async
`

`
npm i @haskellian/async
`

- worker.ts:

`jsx
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):

`jsx
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)
...
}
`

$3

> 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

`typescript
// 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)
}

``