Read Numbers Using OCR API - javascript

A Live Codepen Demo Here reads the horizontal numbers ( 12,32 ) on the picture since OCR Terassect can only read horizontal text. May I ask how to rotate the image by 90 degrees clockwise so that the number 98 is horizontal which we are able to read using Javascript? I know that you can just rotate the image orientation without javascript, but it is tedious. Are there any other API that can read horizontal and vertical text which are unlike Terassect that only reads horizontal text.?
const worker = Tesseract.create();
const defaultImage = 'https://i.ibb.co/jLhP6d2/all-deides-num.jpg';

Related

PDFTron draw text sideways

For my specific purpose user draw rectangle annotation on web viewer and later on replace that with Free-Text in the place of Rectangle annotation.
As you can see in above image i have added one rectangle. Now i am using below code to replace that rect annot with free text.
$text = FreeText::Create($pdf->GetSDFDoc(), new Rect( 440.0, 581.89, 454.0, 781.89));
$text->SetContents("The quick brown fox - 2");
$text->SetTextColor(new ColorPt(0.0, 0.0, 0.0), 3);
$text->SetOpacity(1.0);
$text->RefreshAppearance();
$page->AnnotPushBack($text);
FYI - i am getting: 440.0, 581.89, 454.0, 781.89 from DB using GetRect() method. I have saved annotation in DB. As you can see in above image replaced text is sideways.
So how to fix font sideways issue if page is horizontal?
Annotations have rotation property. Rotation value is relative to documents upright position. In your case upright position of document is rotated counter clockwise 90 degrees.
So when you are creating your free text annotation you need to set rotation value correctly, I believe in your case it would be 270.

Croppic: how to change behavior of image dragging functionality?

Good day. There is a popular application http://github.com/sconsult/croppic. Project demo: http://www.croppic.net. I am trying to use variant Preload (in demo). If I drag image with rotation angle = 0 or 180, I can reach all areas of image (and see it in crop area).
If I drag image with rotation angle <> 90 (80, 120, etc.) - I have unreachable areas, which I can't drag in crop area with such rotation angle. But I need ability to drag all parts of resized and/or rotated image to the crop area. Can you help me to defeat this restriction or tell, where is it - java initDrag / onImgDrag, cropContainer, imgWrapper? I can't understand, where I can find restrictions/parameters/conditions, which define this behavior.
Illustration:
Or you can repeat my example on Croppic demo page.
You should read the code in the touchmove handler (Line 476).
The image is bound to the container and in the source the image position is reset to fit thouse boundaries every time you drag (starts at Line 489).

How to convert points to pixels to scale properly

I'm trying to do and image highlight. So I take pdf image preview and based on the field (extracted from pdf) the user clicks, it will highlight the field in the image preview.
Im trying to accomplish this using css where a have rectangle at the bottom of the image and just set a margin based on the field position that will highlight that field in the pdf image preview.
The problem is that I can't quite get the conversion right for my margins.
So I know there 72pt in an inch and 96 pixels in an inch.
Don't really know where to take it form there. Should I also consider the user's resolution? Is there a library I can use?
So far what I have given:
field positions (in points),
pdf max height/width (in points),
image preview max height/width (in pixels)
How can I convert the field position to pixels so I can highlight that field in the image preview?
Convert points to pixels.
pdfPointsH / pdfPixelsH = x
pdfPointsW / pdfPixelsW = y
Use proportion to translate Point coordinates into Pixel coordinates e.g.:
PointX * x = PixelX
PointY * y = PixelY
Hope that helps.

Photoshop - How to navigate the canvas using Javascript?

How does one get and set the following values using Javascript in Adobe Photoshop CS6+:
Canvas Rotation
Canvas Zoom (https://forums.adobe.com/thread/1016213)
Horizontal Window Offset (Panning)
Vertical Window Offset (Panning)
I see that there is an app.activeDocument.rotateCanvas() function, but beyond that...
I'm not entirely sure what you mean by offset.
As for rotation. It's quite simple. The amount of rotation desired is measured in degrees & is placed between the brackets. So if you wanted to rotate counter clockwise that would be -90.
e.g.
app.activeDocument.rotateCanvas(-90.0);

Calculate new width when skewing in canvas

I'm using canvas for a project and I have a number of elements that I'm skewing. I'm only skewing on the y value and just want to know what the new width of the image is after skewing (so I can align it with another canvas element). Check out the code below to see what I mean
ctx.save();
//skew the context
ctx.transform(1,0,1.3,0,0,0);
//draw two images with different heights/widths
ctx.drawImage(image,0,0,42,60);
ctx.drawImage(image,0,0,32,25);
The goal would be to know that the 42 by 60 image was now a X by 60 image so I could do some translating before drawing it at 0,0. It's easy enough to measure each image individually, but I have different skew values and heights/widths throughout the project that need to be align. Currently I use this code (works decently for images between 25 and 42 widths):
var skewModifier = imageWidth*(8/6)+(19/3);
var skewAmount = 1.3; //this is dynamic in my app
var width = (skewModifier*skewAmount)+imageWidth;
As images get wider though this formula quickly falls apart (I think it's a sloping formula not a straight value like this one). Any ideas on what canvas does for skews?
You should be able to derive it mathematically. I believe:
Math.atan(skewAmount) is the angle, in radians, that something is skewed with respect to the origin.
So 1.3 would skew the object by 0.915 radians or 52 degrees.
So here's a red unskewed object next to the same object skewed (painted green). So you have a right triangle:
We know the origin angle (0.915 rads) and we know the adjacent side length, which is 60 and 25 for your two images. (red's height).
The hypotenuse is the long side thats being skewed.
And the opposite side is the triangle bottom - how much its been skewed!
Tangent gets us opposite / adjacent if I recall, so for the first one:
tan(0.915) = opposite / 60, solving for the opposite in JavaScript code we have:
opposite = Math.tan(0.915)*60
So the bottom side of the skewed object starts about 77 pixels away from the origin. Lets check our work in the canvas:
http://jsfiddle.net/LBzUt/
Looks good to me!
The triangle in question of course is the canvas origin, that black dot I painted, and the bottom-left of the red rectangle, which is the original position that we're searching for before skewing.
That was a bit of a haphazard explanation. Any questions?
Taking Simon's fiddle example one step further, so you can simply enter the degrees:
Here's the fiddle
http://jsfiddle.net/LBzUt/33/

Categories