Compare a shape in an image with PHP - php

I'm trying to compare shapes in php. I have a database with a lot of images, in those images there is a shape ( mostly in the center of the image ). Now I want to compare those images to a Shape.
The input is a shape (png) that is exact the same size then the images in the database.
I made a function that takes the color of the shape and turns it in black ( and the background in white)
The input is like this:
The original is like this:
I can compare every pixel in the image and track how many black pixels are the same, but this will take a lot of CPU and I think it will not work every time.
I also can use an another language like python, but I really wanne fix this in PHP. Does anyone has an idea to do this in a practical way?
The anwser in the question "Compare 2 images in php" is different then I expect. I need to compare a part of an image ( in the example the background in white, but it can be there is some noise in the background )

This seems to be doable with the trimImage() function in ImageMagick (-trim flag on the command line). Considering you were already able to convert the image into a black foreground and white background, this function should always do what you want. At this point just compare images as stated in the question you linked.
This is the result of using trim on the command line on the image with padding:
I assume that the function that you made is similar to the algorithm in findimagedupes. If not, you should borrow that idea.

Related

Replacing detected object in a frame with an image.(imageProcessing)

Overview:
I am working on a video creation project. The technology I am using are: imageMagick, php, ffmpeg.
Current Status:
Currently the project is able to create videos using images and texts and few basic transitions. The way I am doing it is using imagemagick to create gif using input images(with transition effects in them) and then converting all gifs to videos and atlast concatenating the video together.
Next Move (My question):
I am now set to take it to the next level. So, what I am having is a video(1920x1080) with some white frames(1280x720) that keeps shifting in each frame. I want to replace those white frames appearing in some frames of the video with some images(1280x720) that I wish to use. Please see the image here and you will get an idea: These are just two frames from my video. If you can see carefully the images are shifting(white space is not constant).
Expectation:
So, I want to fill those white space with one of my own image. If the case would have been for only one frame I could have used ffmpeg to overlay image on the exact width and height. But here the white space is not fixed and keeps shifting in all the frames and there are a lot of frames. So, I am looking for something like opencv or some other technology that can be used for object detection in a video or in a set of frames and replace the detected area with some other image.
I just need a kick. So, if anyone has already worked on something like this just suggest me what technology can I use. Thanks in advance.
It all depends on exactly what you can assume :
If you can safely assume that your rectangle's boundary is never occluded (hidden) somehow, you can try finding the edges in your image (like OpenCV's Canny edge) and then look for rectangular shape (corners forming a warped rectangle, or the very popular Hough Lines).
If the rectangle you're looking for is always white, you can threshold the image in a colorspace like HSV to look for maximum value (the V in HSV ~ brightness) then rectangular shape search in a binary image.
If your corners are occluded sometimes you'll have to do some tweaking with your image, like morphological operations ("grow and contract" binary thresholded image), then Hough Lines could do the trick.
Note that this answer assumes that once you know where the rectangle is, "you're done", and you just have to overwrite the rectangle with custom content.
I also do not check for any time-continuity : you video frame might jump around based on the frame-by-frame appearance of rectangle. You'd have to include some knowledge about previous positions.

PHP: Building Smooth Image Transitions on the Fly

I'm trying to figure out via PHP if I can do the following. Imagine I have a two images. The first is an image of a square (50px by 50px). The second image, is that exact same square, only offset by 5px to the left.
I'm wondering if there is a way to dynamically generate all the images in-between to make this a smooth looking image transition (ie in this case generate the other 4 images to make it look like it moved from left to right). This would be a pretty simple situation, however would be applied to more complex images with the exact same premises, essentially using two images to predict the mediums.
Thank you in advance for your help
php would only be a wrapper, think eval() and google it, like http://www.linuxfocus.org/English/September2001/article139.shtml
regards,
/t
I believe the best thing you could hope to do with PHP is to do a 'morph' animation, where you sample the pixels for the first image and the second image, then create a third image consisting of the average color values. Repeating this process you could create as many sub-frames as you would like, but the result would be a blurring / morphing of image A -> image B, and would only be perceived as an animation with the simplest of input images.
More complicated algorithms including edge-detection or hinted-shape tweening could be utilized and implemented, however PHP might not be the best choice for this.
You can dynamically create images with a combination of PHP and ImageMagick.
You can pass in each dimension to ImageMagick, and it will generate an image on the fly for you. Create an image for each pixel you offset, resulting (in this case) in four extra images you can use later for your animation.

More Efficient Method for PHP Imagick Color Replacement In PNG-24

I'm creating a little web app where people can choose colors for different parts of a race car. I'm using ImageMagick to take separate images of each part of the car, recolor them (with the clutImage function), and layer them on top of each other to create the final image.
Each image is PNG-24 with alpha transparency. Each image is exactly the same size to make it easier to combine them.
There are about ten layers, six of which are being recolored. The problem is that performance is a bit poor; it takes about ten seconds to render the image after each color change. Here's my code:
Sample code:
<?php
if(isSet($piece['color'])) {
//make a 1pixel image to replace color with
$clut = new Imagick();
$clut->newImage(1, 1, new ImagickPixel("#".$piece["color"]));
//change the color of the part
$car_part->clutImage($clut);
}
//now we need to add the part onto the car
$car->compositeImage($car_part, Imagick::COMPOSITE_DEFAULT, 0, 0);
clutImage seems like it might be overkill for this task; I'm not doing a gradient map, I'm simply replacing all colored pixels with a solid color. Yet no matter what function I use, it will probably still have to iterate over several million pixels total.
Is there a more efficient way to accomplish this, or is this just the nature of what I'm trying to do?
AFAIK, that is the nature of what you are doing. When it really comes down to it, you are just changing the values of a bunch of indices of a multidimensional array. At some point or another, there will be a loop.
There is also colorFloodfillImage, but I have never actually used that method. It may be worth a shot though.
I would guess clutImage is better than iterating through the pixels, because it is running at c speeds, where as iterating through the pixels using a php construct (for/while/foreach) would likely be slower.
One way that you may be able to really increase performance would be to cache parts, so that a given part x with a given color y is only generated once. The next time someone wants to paint part x with the color y, all you have to do is pull the rendered image from the cache. You could either store the image as a file, or store the imagick object in a memory object cache (apc/memcached/etc.) right after the clutImage call, so you can composite it with other objects.
hth.

Changing colors of an image dynamically

I was wondering if it was possible if I had an image like:
I would be able to change certain parts of the images colors. For example if I wanted the bow green and the present red with yellow stripes, would I have to make a new image that had that or is there a way to program something (elegantly) along the lines of that? I'm just asking to see if its possible and if it is, what language would be best to do this?
Keep in mind this would be a feature on a website.
That's not going to be easy the way the image is. You have no way to tell the computer which part is the bow, which part is the stripes, and which part is the box. However, if you pre-colored them, you could do a color replace using GD library or imagemagick pretty easily. You'd do this in PHP. Here are some examples of how you could do it, I'd personally go the imagemagick route.
How can I replace one color with another in a png 24 alpha transparent image with GD
http://www.imagemagick.org/Usage/color_basics/#replace
(this example even has a similar gift box as the usage case, hehe)
Try leaving the parts you want changable transparent. Then, give the div it's in a hover state with the second background color.
You could:
Use an indexed-color image and change the colors in the palette.
Use #MT's suggestion, though it kinda gets out of hand with multiple colors and jagged regions.
Pick control points and fill ("floodfill") the image through them - programmatic version of using the bucket tool.
Use #profitphp's suggestion, which is really better my last one.
Abandon compatibility and use the new canvas element while it still has the "cool" factor :)
i presume this is a web-based painting application; you'll require a human to tell you what the parts are, and where they want the coloring to be.
The issue then becomes how to perform a flood fill at the user's request.
The best i can suggest is perform the flood fill server-side, using an image processing library - handing back the image to the user:
There is no javascript ability to access pixel data of an image.
Edit: Performing flood fill with HTML Canvas

Image comparison with php + gd

What's the best approach to comparing two images with php and the Graphic Draw (GD) Library?
This is the scenario:
I have an image, and I want to find which image of a given set is the most similar to it.
The most similar image is in fact the same image, not pixel perfect match but the same image.
I've dramatised the difference between the two images with the number one on the example just to ease the understanding of what I meant.
Even though it brought no consistent results, my approach was to reduce the images to 1px using the imagecopyresampled function and see how close the RGB values where between images.
The sum of the values of deducting each red, green and blue decimal equivalent value from the red, green and blue decimal equivalent value of the possible match gave me a dissimilarity index that, even though it didn't work as expected since not always the most RGB similar image was the target image, I could use to select an image from the available targets.
Here's a sample of the output when comparing 4 images against a target image, in this case the apple logo, that matches one of them but is not exactly the same:
Original image:
Red:222 Green:226 Blue:232
Compared against:
http://a1.twimg.com/profile_images/571171388/logo-twitter_normal.png
Red:183 Green:212 Blue:212 and an index of similarity of 56
Red:117 Green:028 Blue:028 and an index of dissimilarity 530
Red:218 Green:221 Blue:221 and an index of dissimilarity 13 Matched Correctly.
Red:061 Green:063 Blue:063 and an index of dissimilarity 491
May not even be doable better with better results than what I'm already getting and I'm wasting my time here but since there seems to be a lot of experienced php programmers I guess you can point me in the right directions on how to improve this.
I'm open to other image libraries such as iMagick, Gmagick or Cairo for php but I'd prefer to avoid using other languages than php.
Thanks in advance.
I'd have thought your approach seems reasonable, but reducing an entire image to 1x1 pixel in size is probably a step too far.
However, if you converted each image to the same size and then computed the average colour in each 16x16 (or 32x32, 64x64, etc. depending on how much processing time/power you wish to use) cell you should be able to form some kind of sensible(-ish) comparison.
I would suggest, like middaparka, that you do not downsample to a 1 pixel only image, because you loose all the spatial information. Downsampling to 16x16 (or 32x32, etc.) would certainly provide better results.
Then it also depends on whether color information is important or not to you. From what I understand you could actually do without it and compute a gray-level image starting from your color image (e.g. luma) and compute the cross-correlation. If, like you said, there is a couple of images that matches exactly (except for color information) this should give you a pretty good reliability.
I used the ideas of scaling, downsampling and gray-level mentioned in the question and answers, to apply a Mean Squared Error between the pixels channels values for 2 images, using GD Library.
The code is in this answer, including a test with those ideas.
Also I did some benckmarking and I think the downsampling could be not needed in those little images, cause the method is fast (being PHP), just a fraction of a second.
Using middparka's methods, you can transform each image into a sequence of numeric values and then use the Levenshtein algorithm to find the closest match.

Categories