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
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 am currently working on a project in PHP which involves uploading PDFs, converting them into images and then selecting a perimeter (area) on any one of the 4 uploaded PDFs (later images) as a reference, and finally crop those images all at once.
I have converted PDFs to images successfully (at a very high resolution), now what I need to do is to create a page say "Specify Perimeter", where I want to place any one of the four images as a reference for area/perimeter selection (since image would be of large size, a zoom functionality would also be required).
Once i have selected the area/perimeter, then I would click a button "Crop or Save Perimeter". And the server should take that perimeter and crop current as well as other 3 images with same perimeter.
Note: All images would be almost identical with same dimensions.
Here's a front-end tool you might find useful:
https://fengyuanchen.github.io/cropperjs/
And a back-end tool you might find useful:
https://github.com/masterexploder/PHPThumb
I have a div with overflow:hidden which contains image (.draggable()) that is usually larger then the div and I need to get only visible part of the image and send it to server side script and save as new file. So my question is, how to get only that visible part?
Thanks!
The solution is by getting the x,y position of the draggable. You can get that data by using .top() and .left() on your div. Then you should send the whole image to your server with the top, left, width, height data and crop it on your server-side.
Please note that I think that it would be possible to crop it to the Client side by using a Canvas HTML5 element and some tricky javascript.
You have two options, depending on the method that your are moving your image in the div, save the parameters in inputs using javascript and pass them using POST method when submitting.
For example you pass the TOP and LEFT of image and you already know the WIDTH and HEIGHT of div, so if the left is -375px, you know that you should crop the image from 375px to (375px + div's WIDTH) and same goes for top.
Better option is to use this nice jQuery plugin:
http://deepliquid.com/content/Jcrop.html
You should look at the absolute top and left values of the image and compare it with same top and left of the div, take the differences along with the div width and send all this data to server side where you can crop the image via some other programs /library.
I am creating facebook app in which I have user image as background image and have a default cap image which user can move around. After user has placed the overlayed image(a hat) over the right place he clicks save
This is where I am struck and like to know how can I save the background + where user placed hat as single image, if this makes sense. I donot know how to approach this whether these image can be saved as one or do i get positions where the other image was placed
If someone can suggest
You can simply place the hat image using the GD libraries which are available on most web hosts. The specific method that will be interesting to you is imagecopymerge.
Alternatively, you might consider simply storing the coordinates in your database and then reassembling the image in HTML, assuming you don't need to send the image anywhere.
if you use jquery, check out position(). This will get the hat position (top, left values) in relation to the parent (which should be the backgroun image).
On dragging the hat, update some hidden inputs with the values from position(). Now when you submit the form you have top/left positions which you can use as X/Y positions in GD or imagick to make one single image, or store in a database so you can render the hat in the correct place next time it loads the page up
You need to extract the placement coordinates using javascript, and then transfer them to PHP. Since i don't have any specifics about your code i can only give you hints:
1) Get the hat image placement coordinates
2) Compute the OFFSET of the hat vs the head
3) Send that to PHP with all info you might need to process the request
4) Use GD to imagecopy the hat onto the head's picture and save it
5) Show or output a link to the image...
Does that help?
Check out ImageMagick
For reference Check how Imagemagick Overlay of image onto another image is done
I'm trying to make a script that zooms into an image. This is the page:
http://vermilionsite.com/phone/?id=1
Click the first option, then choose a colour, then mouseover the image. It uses the original image. How can I make it so that the zoom uses the new coloured image?
The jQuery function you have just adds a div with a background over the image, while the original mouse overlay function that zooms your image moves the 'bg-iphone.png' background around in an overlay, so the logic is somewhat flawed as you would also need another background image with the same color on the original div so a bg-iphone.png modified with the same color. I guess you could modify the script that returns your color overlay to also return a modified image and change the background of the image from bg-iphone.png to a png with the same color as the overlay.
Or you could have three modified pngs with the same colors you need that would change the background image in the select function.
Hope this helps.
use this http://www.userdot.net/files/jquery/jquery.loupe/demo/