I am using papaya to view a DICOM image. I want to highlight a specific region of the image when a user drags over a region.
I was trying to use Jcrop plugin, but it does not seem to work. Is there a fix in doing that? Or does the papaya viewer have a built in function to capture the drag event?
I'm guessing JCrop is designed to work with <img> not <canvas>, but maybe this will be helpful: Cropping image drawn into canvas with JCrop
In Papaya, take a look at these in viewer.js:
papaya.viewer.Viewer.prototype.mouseDownEvent
papaya.viewer.Viewer.prototype.mouseMoveEvent (see isDragging)
papaya.viewer.Viewer.prototype.mouseUpEvent
// these might be useful to set a command-key to enable your feature
papaya.viewer.Viewer.prototype.keyDownEvent
papaya.viewer.Viewer.prototype.keyUpEvent
Note, there are already several features that listen to mouse moving and dragging, so you'd have to work around those (maybe add a new command-key for your action) or disable the existing behavior.
Related
I'm creating a image editor and wanted to use any good image manipulation js library. I'm already using CAMANJS but the problem is that I'm using slidder for adjusting image like - sharpness and contrast.
It works like a charm but I want to render the adjusted image on the go, as the slidder moves not when user leaves sliider(ie - onMouseUp - unlike the CamanJs example: http://camanjs.com/examples/).
Is it possible to do in Camanjs or can someone suggest some library that does this on the fly(ie- as the slidder moves).
Is it possible to have irregular shapes like anchors on some surface in JS that can be clickable and it becomes a ball on runtime on page loads? I want to animate that surface that can be a ball and also want to track that which anchor shape is at particular point.
So is it possible using JS? How can this be achieved? I was unable to find any solution. Is there some JS library that can do this? Something like processing.js or Raphael js?
Could I suggest an HTML image map? You can embed an IMG tag in the page set it's usemap attribute and then define shapes on that image to be clickable areas.
It doesn't have as many features as a canvas but maybe a regular IMG element will do in this case.
I suggest using SVG with excelent Raphael js library. You can make interactive animations with pure javascript (i.e. without additional plugins) and those objects can be made irregular anchors (overriding click, mouseover and mouseout events to emulate anchor behaviour).
Another idea is to use HTML5 canvas, but this requires more code (the technology is still immature) and may fail to work under different browsers.
I have a simple problem in my mind but can't figure out where to start and JS isn't my strongest front. The JavaScript part is what gives me troubles.
I have an uploaded image which I want to drag my mouse upon to make a rectangle and get the rectangle coordinates. Those coordinates should go into my Rails app db so that this rectangle is latter displayed to the user and the image part that is selected will be zoomed to the user.
I've gone through several jQuery plugins that do tagging on images but first of all they are too complex for my needs and can't be customizable to this specific need of mine.
In order to get a real live example please see this http://www.stylebistro.com/lookbook/Tops/PJfJzgo2fN9
It is essentially what I want to achieve but the administration part is giving me troubles.
Regards,
Yavor
jCrop has an API that returns image coordinates. It can zoom the image as well, so it should be a good fit.
Is it possible for click events to register on an image only when the pixel clicked isn't transparent?
If I have a right triangle image, only have the click event register on the actual triangle itself, rather than the whole box, half of which is empty.
Is this even possible without using <canvas>?
I'm already using jQuery in the project, if it has some way of doing this.
Not with plain html and an image.
You might be able to get away with a (relatively unsupported still afaik) css background clip, or using an (and I can't believe I'm recommending this) image map. More code-heavy options would include checking the pixel at the point clicked, but JS doesn't always have access to image data (depends on the browser) and an ajax request for the server to do this would be overkill I think. Canvas and SVG might be decent options for you, but they introduce additional dependencies that you have to be aware of that might not be worth it.
Alternately, you can create the triangle in HTML/CSS. :)
You can define an image map to go around the non-transparent part of the image and handle its clicks. And image maps do support the onclick event attribute.
I am creating a CMS which has a number of images which a user can upload and attach to various places in the pages.
I am trying to find a nice, preferably jquery based plugin or similar for scaling an image before allowing it to be cropped.
I have implemented jCrop http://deepliquid.com/content/Jcrop.html which is working great. However a user, if they upload a large image, cannot scale the image down in order to then crop a section of it.
I understand that it's possible using GD to scale the image down, but it would be ace to combine scale and crop functionality in the javascript interface in order to give the use a better idea of what they are doing to the image before they save it.
If I create a custom function to change the height and width of an image perhaps tied to a slider control, will I be able to pass the data into GD lib? So that I can drop and scale all in one go before outputting the new adjusted image?
If you can mandate that HTML5 capable browsers be used, this project might solve all of your problems:
http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/