I have a small div (overflow:hidden) in which I'm showing a big image which is draggable.
I want to crop the Image in the exact position in which it is visible in the div.
NOTE: I know I can use html2canvas, but I want to crop the Image in its original size.
See this link to get the position of a DOM element:
Get the position of a div/span tag
It sounds like you'll need to get the position of several different elements to calculate the relative coordinates you want.
Related
I am using jQuery mapplic plugin, calling in div element in the following way:
<div><section><div id="mapplic" class="mapplic-routes"></section></div>
After selecting from and to and go Icon in the routes svg is zooming and not displaying within the fixed position. The image is big in size and zooming to top within the browser.
How do I display mapplic svg image in a fixed position?
I tried with position property and tried with div properties.
I am creating a lightbox style plugin that opens an image in fullscreen and adds text about it next to it. I need a zoom animation, that just zooms the small image up to fill the screen. Since the small image is in a column layout, i need to move it out of the current dom structure. However i am unable to do so while doing the zoom animation.
So my question is:
Is there any way to move an element in the dom, or just change its position to fixed and keep its position on screen? I have jQuery avaliable
If all you want to do is get it done, this plugin could do the job.
magnific-popup
Otherwise, I'd put the image in a container of the same size so that you can change the image display property without having your layout get screwed up.
You don't need to move the element in your DOM. Just change the css.
Also this stackoverflow question could possibly help you.
I was wondering is there any way to make some html element like div, image map or any other linkable elemente to fill only specific amount of pixels.
Example. If I click within document I will get coordinates of my click (it could be 100x100) and than if I want 23 pixels to be filled and linked somewhere around that area. Is it possible?
I have a site where it has div tags with background colors, and I use relative positioning to move them all together so it looks like an image. I moved them so its exactly on the top left of the page.
How do I create an image out of it, so like if there was a button, when it gets clicked, it creates an image of width 608px and height 105px, and then asks the user if they want to save it or open it or close it (standard download box)?
I would need to get the pixel color starting from index (0,0) right?
Instead of using background images on divs, just draw images onto a canvas. Then take a look at this http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Guys i'm having a problem with the javascript in my website. I cant center the div to properly show the image i click. It only works at the second try, the first try of any image it allways show the div to the bottom right.
I've tried messing around with the javascript but can't get my head around it.
Check it out here
It happens because you apply the CSS properties before setting the image src.
When you first load an image, there is no previous image and it does nothing to center.
When you click another picture, it centers the image according to the previous image's dimensions.
It happens becouse your div doesn't have any offsetWidth and height yet.