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.
Related
I am currently creating a web app that will allow users to upload their highlights / clips from Overwatch and I wanted to use JavaScript to detect what character they were playing as.
I currently have it taking a still from the video that they upload, but wanted to use JavaScript to detect the image at the bottom left of the screen and get a result for which character it is:
I am unaware of any libraries that can do this while not over complicating my needs. Furthermore if I was to use an AI library such as tensor (which im not even sure if it would work), would I be able to use the training data if I bundled it as an app for the app store?
If the image in the bottom left is the same, you can accomplish this using canvas.
You would need to chop the whole image down to just the avatar, and then compare the avatar to ones on file.
The comparison would require the base64 of the image, and compare those bases. If they are the same, voila!
Is there a possibility to identify if an image (coming out of the photo library in iOS) is an animated GIF or just a normal photo? I want to show also GIFs inside my app (built with appcelerator titanium), but I need to identify if it's an animated picture first. That's related to the fact that the normal ImageView is not able to show animated GIFs, as far as I know - but there are tweaks to show a GIF, nevertheless I need to know that it has to be rendered in this special way instead of using a normal imageView.
Can I read this information somehow out of the image metadata?
Check this repository. There is a module for Appcelerator.
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.
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 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/