opencv.js load image in react, cv.imencode is undefined - javascript

Hello I want to manipulate an image in react. So I use opencv.js for this.
I found this repo https://github.com/vinissimus/opencv-js-webworker which gives a good example how to use it with react.
In this example the image was loaded from a canvas. But I have a blob or a normal image. I dont know how to load this image in opencv.js. I was able to transform the image to base64 string. But I dont know how to load then the base64 string with opencv.js.
I found this question here https://answers.opencv.org/question/215404/reading-data-uri-with-opencvjs/, where the answer says to use cv2.imencode to load base64 image. I am using latest opencv.js and cv.imencode is undefined.
How can I solve this problem? Is cv.imencode avaiable in some older releases? Maybe somebody has an other workaround to use it with react (create-react-app)?

Related

How to create a lib to manipulate and show a new image format?

I work with some .WSQ images (Wavelet Scalar Quantization) and I can't display neither manipulate them in javaScript. (I can't change the image format for another one like .jpg or .png, it needs to be the original .wsq)
I think a good way to deal with it is developing a library that allows to display and manipulate these images in the browser, but I don't know where to start it.
Anybody knows how can I do it? Any material I can read to help me understand how it is done? (For example, imagine I'm creating a way to display jpeg images in browser with javascript for the first time, what should I do?)

Canvas Get Stuck when using fabric.loadSVGFromString

When I load SVGs via fabric.loadSVGFromString(svg), the Fabric Canvas gets stuck and ultimately the browser freezes. However, I don't observe any problems when I use fabric.Image.fromURL(base64Svg). However, I can't utilize base64 converted images since the canvas.toSVG() function returns an image, which I can't use for image conversion. (In my backend, I use an SVG to JPEG converter.)
Is there a way to resolve this problem? Your assistance is much appreciated.

OpenCV JS, get black text from image

I need to get only text(levels in rectangles above circles) from image without any junk but with minimal data loss...this is as far as i can get...is there any way to get better results?
EDIT for OpenCV tag: I`m using latest OpenCV(i guess official documentation page is running on latest version)
There is some images to test with

Three.js - ColladaLoader - Animated model (DAE) - Black texture

I loaded a DAE file based on the ColladaLoader example. I exported from Maya 2012, including a skin. I already had to fix 1 thing by adding the "skeleton" tag in the .dae file otherwise I'd get the error Couldn't find skin. Then I thought if thats a problem perhaps I need to change the localized url of the skin material to just name.jpg because they are in the same folder. But that didn't work.
So my question is: Am I doing something wrong? Or missing something? Already tried of few techniques of editing the material afterwards, they did work but then the model stopped animating.
You can see it live here: http://www.mariusposthumus.nl/playground/webgl
Try exporting with OpenCollada instead:
https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools
Black texture appear when you apply compressed file format texture like png, jpg, tga, or dds , use bmp (bitmap uncompressed) instead it will work.
I've had the same problem but i solved it in this way, seems that colladaloader don't read compressed file format.
It's an old issue that i've had also when i made my first application in OpenGL.
To read compressed file format you need to decode it, and this take a lot of time and a lot of more coding.... ;-)

Alternatives to "canvas.toDataURL("image/png");" in JavaScript?

I'm working on a Palm Pre app and I need to find an alternative to "canvas.toDataURL("image/png");". Ideally it could export the canvas image to a jpeg file but png would be find also.
The simple code available here might be helpful.

Categories