I have searched a lot but i could not find any proper solution for my requirement.
I want a functionalty in my website where user can select any area on browser or anywhere in desktop and convert the selected area into image.
I know this can be done in windows form,there you do have options to track mouse movements and capture image from screen.
I know if i wan this functionality in web i have to get cordinates via javascript and hen maybe make an ajax request to webservice and get my image.
first of all i cannot find a proper way in javascript that will get me mousedown and mouseup coordinates.
I have seen jquery 's Dragable and resizable div.I want something lke that for user to select the area which has to be converted to image.
I can even get Origal mouse position,Current mouse position and the size of div using jquery dragable and reszable div.
and Second i want some advice as to how i should grab the selected area as image.
Kindly help me out.
Not possible with JavaScript. Web pages are (intentionally!) not capable of tracking mouse movements outside the browser window, nor of reading an image off the user's desktop.
You mean something similar to: http://www.screenr.com/record ?
You can use the clientX and clientY of an event to get the mouse coordinates. For example:
http://jsfiddle.net/yN3S5/1/
HTML:
<p id="x" ></p>
<p id="y" ></p>
Javascript:
document.onmousemove=function(e){
x=document.getElementById('x');
y=document.getElementById('y');
x.innerHTML=e.clientX;
y.innerHTML=e.clientY;
}
First, to convert your page to image, there is a very cool library that can do that. Its use the canvas, and render on it the full page by reading it
Get the code and see the examples from here.
http://html2canvas.hertzen.com/
Once you have the page in canvas you can thn conver it to png and get a part of it by selecte it.
See this example ! http://hertzen.com/experiments/jsfeedback/examples/dusky/index.html
Click on the send feedback, then select an area on the page, then click on preview ! Its very near for what you ask, but instead make a red rectangle you cut this part of the image.
more examples like the last one : http://hertzen.com/experiments/jsfeedback/
Forget to capture anything outside the browser.
Related
I need to create a website with this kind of function:
I have an image (like a park area), so in different points of this image I must create a div which will do a hover effect and show a textbox with an image (or maybe a link to it).
My main doubt is that I have no idea how can I get certain points of this image to create a div with this hover effect.
Please check the below URL's. Hope this may helpful
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
http://www.howtocreate.co.uk/tutorials/html/imagemaps
http://www.outsharked.com/imagemapster/
you can do with jQuery. Please, firstly look at this link. You can take mouse x and y position on image. Then on x and y position, you can do, what you want.
I'm making a browser game, it's based around a world which you can build on, essentially I have a little user window with a box in, where the world/map is.
Basicly this map is so big so you need to be able to pan it, like click and drag inside the box to move the "map". (The map is essentially a big image)
Now there's a problem with images and dragging. When I click and drag on an image it assumes I want to "copy" it or drag it somewhere.
I tried to replace it with a normal div and it works so the code is fine. And I don't want to place the image as a background image either.
So my question is, how do I "disable" the "drag picture somewhere" feature? Whenever I try to click and drag on a picture, on any website, my cursor changes to a "no" sign, it means that I can't drop it there and if I'd move it into lets say photoshop, it'll change to this "drop pic here" cursor.
EDIT
Sorry for me not researching, I found out that you can do;
[element].ondragstart = function() { return false; };
You could use
[element].ondragstart = function() { return false; };
as you suggested, or I also think you could solve this by absolutely positioning another div on top of the image, just as a "control layer". That way you could write js that responds to mouse interactions in that div without worrying about the image at all.
I am working with image map i am taken two buttons in my image. in button click one popup(div)displaying .in that div i am taken image one map with areas . i am trying to click (close button and on and off button)) but not responding .after maximize the browser window it is working . could any one solve this problem.and i want make all images responsive i used JQuery Image Map it is working but . when i given div position is absolute.
it is not working. can any one provide solution for this problem
(press tab key for identify image map area's)
Although your question is hard to understand, i will try my best for 50 reps (I am young and needed the money ;)
You are using a JQuery Library from here:
https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js
The readme of it prints in large letters:
"Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize"
So, your close handler doesnt trigger, because the area coords were only calculated by that "rwd" once you resize your browser window, and the readme tells us, that it is designed to do so.
Btw to make your code work:
add $('img[usemap]').rwdImageMaps(); below line 20 in your javascript code.
I have a textbox, a div, and an image.
Do we have any way to do like this:
When I drag that image into the div. (The image don't need to move, just like we left click on it, and drag it to anywhere, but it never move.)
The div show the image. (Duplicated 1 image into the div)
The text show URL of that image.
Do you have any idea or article(s) on doing this thing?
I've never coded drag drop in my life, but I know Step 2 is just set HTML for the div, and Step 3 is just get image src. However, on Step 1, how do I know when "the image into the div and the mouse release?"
I know jQuery UI, it's not the dragable from jQuery UI, cause the draggable makes object move. I don't want it move. Can you try click on any image on this stackoverflow website, or any link. Then you hold your mouse and drag it. Try drag a link into the search box at top, and you get the link. Thats what I want. Not the dragable of jQuery UI to make the object move.
You can do all of this with the dragable feature in jQuery. I noticed in a comment you mentioned that you don't believe this will work because it actually moves the image but there are more than just the default options! Take a look at the clone helper attribute.
Here's about as close of an example as there is and it sounds like you already know how to handle the rest (getting the src attribute, etc.).
http://jqueryui.com/demos/droppable/#method-option
JQuery draggable allows you to leave the original in its place while dragging through the use of Helpers. See this url and try dragging the top grey boxes around. The two on the right use helpers, leaving the original in place.
http://www.jqueryui.com/demos/draggable/#visual-feedback
Using this in conjuntion with the link Artsemis provided will do the trick
Dragging an image into your address bar is a function of the web browser, not JS or the page you are viewing. You will want to use jquery draggable or something like it.
What i want to do is have a user upload his image. When its complete it will display the image on the same page w/o refreshing. Here is the part i need to figure out, how do i have the user select a box in the image? so i can crop it when the user is done? (using ImageMagick).
If possible i would like a border for the user to stretch to edit the width and height. Then click within the rect to move around.
There's a ton of ways; including several pre-written plugins available through the web.
Are you using any frameworks?
Of the below, I've used Jcrop and Lasso.Crop and they've both worked out well. Haven't tried the others.
Here's a non-exhaustive listing:
Pure Javascript
http://www.dhtmlgoodies.com/index.html?whichScript=image-crop
jQuery
http://deepliquid.com/content/Jcrop.html
MooTools
http://www.nwhite.net/2009/02/25/lassocrop-preview/
Prototype
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/