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/
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 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).
Would anyone be able to tell me if there is a way to apply a color halftone effect to an image using JavaScript and without using WebGL. I need to create it so it can be used across multiple devices and browsers. I have found this but its using WebGL: http://evanw.github.com/webgl-filter/
Would I be able to use three.js or processing.js to achieve it?
Any help would be very appreciated.
Create yourself a canvas element and put the image inside (see link from #Diodeus).
Get the image data from the canvas - now you can iterate over all pixels.
Apply the halftone filter on the image data. see: Algorithm to make halftone images?
Update image data
BTW: I don't recomment to do this on the client machine. Image Processing requires some processing power which may not be available on the client (e.g. Smartphone). Better do it ONCE on the server with e.g. ImageMagick.
I am having sequence of images in HTML. All are large size images, I am scaling theme in initial display and on click all enlarge.
So the issue is, when image is scaled down, it shows pixelated output. (See link)
If anyone have solution to have consistent output when image is scaled, please give suggestions.
I think you have to scale them not dynamically in the browser. Create thumbnails on serverside by using libs like imagick or gd.
The quality of an image scaled down by the browser will depend on the image scaler used by the browser. Most of these have no method of resampling, and simply remove pixels from the image to reduce its size - hence the pixellated look.
There is nothing you can do about this, other than to use separate images for the small and large versions.
As floating concept is there the resolution varies differently in system.So its better to use good quality image.
Check this link http://codecanyon.net/item/imageresize/59935
If it is useful for you tell me I can send you the code.
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.