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).
Related
I need to create a simple mobile app in React Native for manipulate images from the gallery and the camera. I searched it everywhere, but didn't found any proper solution for this, just libraries for cropping/rotating/etc.
I only want to put own filter on pictures (like a simple national flag with opacity).
Is there any library for bare/expo RN to edit image pixels, or is there any solution to convert an image to a bitmap then convert back to an image and save it?
Rotating, flipping (mirroring), resizing, and cropping are all options available in this package: #oguzhnatly/react-native-image-manipulator. You can manipulate the image supplied by URI.
I'm trying to come up with a way to mimik something we were previously doing in Adobe Flash using some sort of Bitmap Filter but instead with pure javascript.
Previously we had a set of PNG images w/ transparency around the core image. When an image was clicked, a soft glow (ala border) would be added around the non-transparent portion of the image, slightly consuming some of the transparency but the majority of the outer transparent portion would remain transparent.
W/ javascript I can easily add a border around the entire image when clicked, but that is not what I am aiming for. I only want a border around the non-transparent portion of the image.
I'm unfortunately not familiar enough with image manipulation techniques, so I'm curious if there is a way I could achieve this using the various JS image manipulation libs out there ala BitmapData or Pixastic. Taking a look at both of these I wonder if there is something I could do w/ edge detection, glowing effects, and overlays...
If you're already using Raphael (or are willing to use it), you might consider using Dmitry's blur plugin. Building on this answer, I was able to achieve the glow effect I think you're looking for by adding another image behind the one I'd like "glowed". The background image is blurred, giving a "glow" or "halo" around the crisp image on top.
Sample code:
var img = this.R.image("yourImage.png", 0, 0, 50, 50);
var glow = img.clone().toBack();
glow.blur(5);
The plugin includes the caveat that there's no WebKit support. It seems that there is now some WebKit support as it works in Chrome (I'm running 18.0) but not Safari (I'm running 5.1.5).
I only want a border around the non-transparent portion of the image.
It is impossible to do it with js. Only if a replacement image is already prepared. Canvas is not really a solution (if you need compatibility) and all these 'calculations' will take resources and time.
I'm not sure it's entirely suitable for your situation, but there are tools out there to convert Flash to HTML (e.g. Swiffy). I suspect they can be flaky at times, but it's something to consider :)
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 need to create a web application allowing people to upload an image and place on it a pre-defined element (like placing sunglasses on a face), with all necessary functionalities like resize, crop etc.
something like this: http://bayifier.com/
I can do that with flash, but i'm wondering if there s a way to do it with javascript.
thanks
you could use canvas and javascript like Pixastic does
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/