I am trying to create a dynamic image that will be created from PHP using GD... What I need to do is be able to specify the layering of one image over another. The images are supposed to overlap slightly and get smaller as you move towards the right of the image... however the only way I can get php to render the images to the left on top of the ones to the right is by reversing the script.
I would like some sort of way to be able to add the images 1 by 1 to the picture from left to right but having the image on the left overlap the one on the right....
Exactly like z-index in PHP, is there a way to do this?
Image manipulation in GD is additive, AFAIK. If you are going to manipulate an image (in your case, create a composite image), then you need to start with a base (maybe a solid background) then add pieces to it.
You can get the effect that you want by performing one of the two procedures:
take the "left to right" stack that you have and reverse it, applying images to the composite from right-to-left.
go "left-to-right" and calculate which part of each image will show around the previous image (to its left). This method is significantly more complicated because the image on the "lower z-index" can show around up to four corners of the image to it's left.
Related
I want create necklace like structure by stitching images together with image magick, how can I achieve this?
We are using PHP to call imagemagick.
Attaching image here...
These small nuts will be separate images
1/ Resize, crop and mask your images - round image on transparent background.
2/ Assuming you always have the same amount of images; work out the positions and composite your images into the position on the blank canvas.
There is a lot more you can do like adding drop shadows or adding a glossy button finish etc.
Stackoverflow is not here to provide code for you but to help you with any code you have. You can find a lot of examples here: https://www.imagemagick.org/Usage/ and they will all work with php and exec()
I was able to do it logically by using individual nuts and putting them all on main image again by adjusting the left and top of each nut.
Thank you all for your help.
See how you want to synthesize, the basic can use the PHP image processing function to create a canvas, the length of the three pictures of a long, width is the width of the three pictures together
I am working with cakephp, and I need to place many amount of small images into coordinates, where each of the image has its x and y values. And at certain points, I'm gonna need an image to be replaced with a new image. Let's say image on the x=10, y=7 needs to be replaced after a certain condition is fulfilled, how can I make it happen? Thanks.
This is not a problem that cakephp should solve.
My approach would be to construct an array with the image properties, (url,name,order)
then do the rest in javascript.
you can init a grid with images and set a timeout to replace those images properties.
to style it give the image containers some classes that you can animate in css with a transition
for some nice examples:
http://css3.bradshawenterprises.com/cfimg/
I'm using Wordpress and using their code, I'm outputting the gallery uploads to a specific page as an unordered list of images.
I'm wondering if there's a way to position these images absolutely within the container (which will be relative) using JS and without any overlapping? So, it must position them and then take note where that image is and make sure the next image doesn't overlap etc.
This should be a random generation each time, but I'm also wondering if it's possible to make the images and their position the same each time?
Thanks guys, look forward to some thoughts.
-R
EDIT: You can see the HTML and progress so far here: http://richgc.com/freelance/staton/furniture/
There are a few jquery plugins that do this.. Here is one:
http://masonry.desandro.com/
Go with #lucuma's answer (I didn't know there were pre-existing plugins).
If you were going to implement such a plugin by hand, you could use a cutting algorithm, traditionally used for optimizing the cutting out of parts from sheet metal, to determine locations for your images that will not overlap.
If you select a deterministic algorithm, you should always get placeholders for images in the right place. Were images always of different sizes, that would ensure images always appear in the same place. Since many images will probably be the same size, you could assign images to the "cut out slots" in e.g. alphabetical order of the image file name.
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.
I want to create an application where it can display two images, first image is a face image from user and the second is the nose image that is available to choose to be matched with the face. So when i upload face images, i can choose the matching nose and adjust position, size etc.. then merge them into one image. I want to create with JavaScript and maybe merge them into one using php function, I still confuse where should I start.
Any idea? reference? Thank all
A tutorial for Overlapping Images in php using GD:
Overlapping Images with GD (part 1)
Overlapping Images with GD (part 2)
Overlapping Images with GD (part 3)
other functions to upload images and showing them and handling some user user friendly actions can be done easily with javascript. if there was any question in these parts, I can help.