i have two images with overlays and text overlays on those images,text is at certain angle on images and one image will be at certain angle on another image. i want to create one new image dynamically from both these images and text. How can i do that in php.
Related
I have an ecommerce site in which i have to display some products i.e 40-50 products per page.Every product has an image which displays the image of the product.
The main thing is that in the database i have a meduim/high quality image of the product whose dimensions would be around 720px-1024 px , these can vary and every image has dimensions in between these two.
Now, i have two different ways of displaying these images for product, i could use a php script to generate thumbnails from these pics whose dimensions would be 290X290 or i could use the style tag and set the width and height as 290X290 and source as the real image.
Let me explain this by an example.
Original Image
I could do this to display the image
<img src="/imagethumbnail.php?product_id=34"/>
<img style="height:290px;width:290px" src="productimg.png"/>
finall image
one calls a php script and generate a thumbnail image of size 290X290 while the other one simply uses the style tag.
Both of them are working fine but i think when i use the style tags i see a trade off in image quality.While when i use the script to generate the image i see a trade off in image generation like they take sometime to show up on the page.
What would be the better method to do this and what would be the perfect solution towards it?
I think the standard method is to generate the thumbnails in advance. And you should probably set the width and height in the markup as attributes on the img element, rather than under the style attribute.
I have a map image and I want to crop a selected areas of this map using ONLY php.I find ways of cropping but all are in rectangles shape.but I want a polygon shape of my source image,and I have no Idea where to start.
here is my img
I want to save pieces of this map(whiting area borders) as a seperate image.
after ages of searching.I finally create polygons I want in photoshop.and use them as overlays.
I place my overlay images on original image and then save the new image generated witch is the croped image I wanted to be .(this procejure is done by php not photoshop).
I am not sure if this is possible or not, but I am trying to create an effect where when you mouse over an image that is the creation of multiple images overlapped with each other (images would be set with some opacity), I display that section of the image clearer than the other.
Hard to explain, but here a few examples
This image:
is the creation of all those images overlapped (each image is on top of the previous)
When I mouse over the final image I want to be able to "highlight" the part of the image that corresponds to that section of the image in the image itself
Something I was thinking to do is to just show the main image with opaque set, when the user mouse over it, grab the coords, check against all of the images (that cannot be more than 25) see if those coordinates are matching with a non "transparent" pixel and display such image on top of the main to give an "highlighted" effect, but the final images are about 400x200 and create an array of all the pixels on the fly when displaying the page is not realistic for a server that have thousands of hits per hour/minutes. Save this array in a database is not realistic as well as the size of the image might change depending on the page and we currently have 1.3milions final images each one being on average circa 10 broken down images
A possible solution is to create custom SVG overlays for each sub-image. Upon an onmouseover event, you'd decrease the opacity of the SVG element, making the below image more visible.
Checkout this tool for creating SVGs.
$("img").css("opacity","0.8");
$("img").mouseover(function()
{
$(this).css("opacity","1.0");
});
$("img").mouseout(function()
{
$(this).css("opacity","0.8");
});
For the effect of segmenting the image, try using an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
Opacity of image maps is supported:
http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/
Edit:
To achieve the hovering effect, try loading them into a canvas using Fabric JS, here is a demo:
http://fabricjs.com/hovering/
Abandoned the project, the ony solution is SVG but it nos possible at this stage as some browsers/OS do not support fully them
I'm looking for a jQuery script, for more than one crop mean different cropping on a single image. Each crop box properties (width,height,x,y) should be displayed in textbox.
Dividing single image into different parts by user's selection.
Use Jquery JCrop Plugin to get coordinates from user for the cropped image, you can save multiple coordinates as hidden fields while the process, and transfer it to backend to get different thumbnails for the image..
i want some suggestions.
i have to do customize image banner means i have to customize text on images.
for example there is a text on image. this text can customize.after submit this background image and text total convert into one image
Have a look at imagefttext/imagettftext and imagecreatefrompng/imagecreatefromjpeg (or the corresponding function you need).
To create an image from a text, you can use the imagemagick library http://www.imagemagick.org/script/convert.php