Measure area inside of image - is it possible? - javascript

Situation:
Got png (or bmp) image inside html file, on image there are black rectangles on white background. Image size is always constant AxB, rectangles are not rotated and are different each time. Html file and images are generated automatically by some software as a job report.
I need to measure area (in square pixels) of that rectangle i point and click with mouse.
I imagine it this way:
Image is loaded into array or something, when i click image, desired function perform following tasks:
find nearest black pixels to the left, right, up and down, (searching through array from coordinates i click with cursor)
calculate size of rectangle (based on those black pixels),
calculate area,
return area to some variable.
Now, is it even possible? Is there maybe another method? I'm thinking about js solution since i'm not familiar with jquery at all; php and server-side solutions are not an option since the html files are standalone files on local drive.
Thank you in advance
----------------edit-------------
Images to process are black&white (always 1bit!) and look like here.
http://www.dropbox.com/s/smh4982om3hkhd8/job_report_image1.png
I know that first rectangle marked with red "1." has size of 542x570px (inside) - so area is 308940 square pixels - i measured it with MS Paint ;) - now i want to achieve the same in browser - click inside this rectangle and get the same result.

Not an implementation but more a way to go with javascript and HTML5:
Import your image in a 2d canvas context
get the coordinates in the canvas where the mouse click occured
then using canvas getImageData and go through them to get surrounding black pixel
more info on getImageData here: http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

If I understand true, you want to calculate area of an image.
here is a working sample. If you need to calculate with borders you should use myitem.clientHeight * myitem.clientWidth else myitem.offsetWidth*myitem.offsetHeight
function calculate(myitem) {
alert(myitem.clientHeight * myitem.clientWidth);
alert(myitem.offsetWidth*myitem.offsetHeight)
}

This might be little useful for you to find the area: (using php)
<?php
$img = imagecreatefrompng('http://img87.imageshack.us/img87/5673/rotatetrans.png');//open the image
$w = imagesx($img);//the width
$h = imagesy($img);//the height
//Convert to centimeter
$dpi = 300;
$h = $h * 2.54 / $dpi;
$w = $w * 2.54 / $dpi;
echo "width is:".$w;
echo "Height is:".$h;
$area = $w * $h;
echo "Area is:".$area;
?>
Edit:
The number of pixels in an image is simply the height multiplied by the width.
Demo Here>>

Related

FFMPEG, Blur an area of a video using Image Select Areas Plugin

I am building an online video editor. I need to allow the users to blur an area of movies. This must be done graphically, I mean user should be able to select an area of a video, using an screenshot, then the selected area must be blurred. Some thing like this
Is there anyway to map this selected area dimension and its distance from borders to the real values that must be applied to the video?
I mean four numbers, width, length, top, left will be provided using this plug in and I need to use these numbers to blur an area of videos.
I take an screenshot of video. In order to keep the aspect ratio, I will fix the width to 800px and let the height to be scaled up/down. It is clear that the width, length, top, left of the selected area of the screenshot is a factor of the width, length, top, left of the area that must be blurred in video. but I don't know how to get this factor. Besides that I don't know how to get the video resolution.
Thanks in advance.
Update
This is my PHP code that gets the selected area dimensions and offsets
$iLeft = $_POST['left'];
$iTop = $_POST['top'];
$iWidth = $_POST['width'];
$iHeight = $_POST['height'];
exec('ffmpeg -i '.$url.' -filter_complex "[0:v]scale=iw*sar:ih,setsar=1,split[bg][bb];[bb]crop='.$iWidth.'*iw/800:iw*'.$iHeight.'/800:'.$iWidth.'*iw/800:'.$iHeight.'*iw/800,boxblur=10[b0];[bg][b0]overlay='.$iLeft.'*W/800:'.$iTop.'*W/800"" '.$name.' > block.txt 2>&1');
$iLeft, $iTop, $iWidth, $iHeight are the left, top, width and height of the selected area via the image plugin.
It blurs many selected areas very well, but areas like this
The Image Left, Top, Width, Height is 257, 39.26666259765625, 10, 391
don't get blurred. Also a video with Dimension 207x207 didn't get blurred as well.
Running
ffprobe in.mp4 -loglevel quiet -select_streams v -show_entries stream=width,height,sample_aspect_ratio -of compact=p=0:nk=1
will produce an output that looks like this:
1280|720|1:1
The first entry is the video width, then the height, and finally the pixel or sample aspect ratio, shown as num:den so it's num/den. That's your video resolution.
With that info, the factor is video-width*sar/800. This assumes that you'll be scaling all anamorphic videos to square pixels using the scale and setsar filters, and that the 800px screenshot is undistorted as well. If you're using FFmpeg to scale screenshot, it's scale=800:ih*800/iw/sar
So FFmpeg value for area width is screenshot area width * video-width*sar/800.
and for FFmpeg Y co-ordinate is screenshot top * video-width*sar/800, and so on.
Assuming the code in the comment is for the screenshot, for the full-sized movie, it would be
"[0:v]scale=iw*sar:ih,setsar=1,split[bg][bb];[bb]crop=50*iw/800:50*iw/800:20*iw/800:10*iw/800,boxblur='min(min(cw/2\,ch/2)\,10)'[b0];
[bg][b0]overlay=20*W/800:10*W/800"
I've scaled the movie to make sure we're always dealing with a square-pixel video.

How to get image coordinates after centering the object using image.centerObject() in fabric js

I am drawing a rectangle on top of a image and then saving the coordinates of both to a Mysql Database table.
Then I have to retrieve the same image and overlaying Rectangle from a Andriod APP
which will not know anything on FabricJS .
It will only know the coordinates of image and rectangle.
Luckily for image it is not a problem as it can be maintained using some Aspect ratio algorithm.
But how to get the coordinates of Rectangle , so that it can be rendered correctly.
Now what I see is Fabricjs saves the coordinates according to window left ,top, width, height. But andriod app expects the coordinates according to image , which fabricjs doesn't provide.
Any suggestions how to achieve this?
Please let me know if somebody didn't understand .
Its a basic and easy statement , hence not adding any fiddle or code.
before saving to database do this:
image.setCoords();
rect.setCoords();
in
image.oCoords.tl, image.oCoords.tr, image.oCoords.bl, image.oCoords.br
and
rect.oCoords.tl, rect.oCoords.tr, rect.oCoords.bl, rect.oCoords.br
you will find 4 objects with both x and y coordinates that represent your absolute position of the object.
tl stands for Top Left, br stands for Bottom Right and so on.
You should have no problem then to make some subtraction and find relative coordinates of the two objects.
Example:
if image has tl (45,80) and rect has tl (80,110) it means that rect coordinate relative to image is (80-45, 110-80) = (35, 30)

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.

Drawing a Canvas into a smaller Canvas not working

For a Project I want to take the content of a canvas (Called SAVE_CV) and display it in another, smaller canvas.
Some things that I am aware of so far that could be causing me problems: resizing a canvas clears its content, the JS-size of a canvas is different from the CSS-size.
I want the smaller canvas to be 500px wide and appropriately high.
function restoreTaggingCV() {
var cv = document.getElementById( 'taggingCV' );
var ctx = cv.getContext( "2d" );
var styleHeight = SAVE_CV.height * 500 / SAVE_CV.width;
ctx.drawImage(SAVE_CV, 0, 0, cv.width, cv.height);
}
This is my Code so far. Whenever I try to resize the smaller canvas appropriately it only gives me a blank canvas with nothing in it. I tried to set the size with "cv.height = X" and "cv.style.height = styleHeight + 'px'" but neither worked. Also I would love to set the width of the canvas using CSS.
Appreciate any help.
EDIT
I want the image in a picture because later I want the user to mark areas in the smaller version which I then want to use to create individual imaged from the big version. I want to visualise thise area to the user. I probably could do all this by using an image and putting divs over it or something but I just fell more comfident using a canvas since I am pritty new to HTML and CSS.
Try using the CanvasRenderingContext2d.prototype.scale method. It sets the scale factor of the canvas and renders anything in the current state with it's dimensions multiplied by the factor.
So before you use the drawImage function, you scale the context appropriately (in this case, down). For example:
context.save();
context.scale(0.5, 0.5);
context.drawImage(canvas, 0, 0);
context.restore();
This would render the canvas on the context at 0.5 times it's current size. See in this fiddle how I used it to mirror a larger canvas onto a smaller, separate one.
Canvas objects don't like to be resised. After drawing Your image simply convert it toDataURL() and set as image source. They You may resize image as you want.
$img.attr('src',canvas.toDataURL());

Stretching a Graph to Fill the Canvas Element in JavaScript

Quick question involving javascript canvas... I have a set points (connected with a line) I want to graph on a 400x300 canvas element. I will constantly be adding more points. I need the line to stretch to fill the entire canvas (leaving no unnecessary space).
Example:
into this:
Thanks! C.Ruhl
You want to find the step by doing canvasWidth / (number of points - 1)
and adding X += step each time.
Example here:
http://jsfiddle.net/pDDTQ/
Distinguish between internal canvas size and visible size. 400x300 is your visible size and set by style="width:400px; height:300px". Everytime there is new point (e.g. 400,500) you set canvas.width=400; canvas.height=500; and replot the whole graph. From a certain point you might want to adjust the width of the line.

Categories