OpenCV JS, get black text from image - javascript

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

Related

Opencv.js - Background subtraction and replacement in Javascript

I'm applying the items in this tutorial, in an attempt to replace a background image while maintaining the foreground objects. Ideally, I'd like to replace the black and white mask that is generated with the color version of the arm holding the box, in a different setting (image background).
I'm familiar with OpenCV in python, but am struggling to find resources or documentation on what is and what isn't implemented in the opencv.js build. I realize that all of the functionality is not implemented in opencv.js. However, I am almost certain this is achievable with opencv.js, I'm just not sure what steps I need to take as it appears the python examples I'm trying to port are not correct.
That said, here's a python example that accomplishes what I'm attempting to do.
If anyone has any pointers on how I can turn the black and white mask into a bounding area to obtain the arm holding the box and swap it's color image background that would be helpful.

Drawing and writing on image and save it

I have images hosted on the server, and I would like develop some functionality to let the user have possibility to draw over the picture.
They need to write some text too, and, finally save the result as picture.
Finally, its a simple editor, but I don't find JavaScript library who permit it...
You can see an example of final result I need here : https://nsa40.casimages.com/img/2019/08/29/190829023122267348.jpg
You can achieve this with the Canvas API pretty easily.
Your images can be pulled into the canvas by creating a new Image object. The canvas API itself has a lot of methods for doing the things shown on the image (drawing shapes like ellipses and rasterising text).
Finally a canvas can be saved into a png using the toDataURL method.
I am sure if you dig around the internet, you will find there are already some libraries for these sorts of things. Possibly some keywords to try would be "image editing library JS" or something of that sort. Developing the functionality on your own should be ok if you follow some examples online for how to do each individual bit. Hope this helps :)

Unknown content in the html div

I know this question is not a good one but I have stumbled upon on website called Tradingview.com which has awesome charts. I was interested so got into the html code of the website and I discovered that div which should have contained desired chart was empty. I get that the chart is generated by JavaScript but I am interested how it is possible to draw something like that without any html elements and If it is possible could you tell me what "library" do they use?
Here is the link to Apple Stock Chart
https://www.tradingview.com/chart/BRuYnW6t/
Basically Javascript literally Draw chart inside that div on local end.
like JS will make rectangular shapes. circles, lines and everything.
for details please visit this site.
https://www.w3schools.com/tags/ref_canvas.asp
drawing div will be empty but shapes and everything in it will be there because of JS.
Looks like tradingview has an API for their library available upon request. I would also encourage you check out chart.js, a popular solution for implementing charts in javascript.
Normally drawing in HTML is done with canvas (WebGL for 3D drawings) or SVG. Additionally, you may use plugins like Flash ActionScript and Java Applets. For charts, a superb library would be Google Charts.
If you inspect carefully enough (F12), you will realize TradingView actually uses canvas for the drawing.

How to create an online drawing application

I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.

How to change the sharpness and make a photo black and white using JavaScript?

I have designed a basic webpage in HTML which is basically web app to edit the photos online.
Now I am unable to code the program as to how the colour sharpness brightness blurness, making a photo black and white and others haven't been possible.
How do we use HTML and JavaScript to make this work online?
You can do this using <canvas>:
https://developer.mozilla.org/en/Canvas_tutorial
Draw image on <canvas> using Javascript
Canvas gives raw pixel access. Run filtering code written in Javascript. Example: http://blog.nihilogic.dk/2008/03/jsimagefx-javascript-image-effects.html
You can use <canvas> in a similar manner in HTML code as <img> - both are basically pixel buffers
Note that you cannot access pixel data of images loaded from different origin.

Categories