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!
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 have a form input file, and when we upload an image, it will resize the image 2 times. First the original image will resize to square resolution(100x100), and second the original image will resize to landscape resolution(1000x500). After upload the square resolution will go to folder square and landscape will go for folder landscape.
So the original image won't be saved to the database, but the resized images will. Do you think a jQuery plugin for my case exists?
Javascript/Jquery is not the right choice there.
Javascript/Jquery work client side: they operate on users pc and not on your server. Maybe there are some plugins capable of resizing images, but surely you won't be able to store them in different folders using Javascript/Jquery
Such an operation must be done on your server, with a sever side language like PHP, NodeJS (still uses Javascript language), Java or many others.
The answer is based on the language off your choice, so i can't give a general one
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.
I have several 1000s of images on disk that I need to display a subset of, given user search criteria. What this means is I could be showing 100s at one time. Each image is large- 3510x1131 to be exact. And I need to do some light image processing before they are displayed (adjusting brightness and contrast).
My application to do this is a Web.API app using jQuery.
My first pass was to just pass the URLs to the browser and then size the images and make those adjustments using pixastic. Works, but it's pretty slow.
I was thinking it would be much faster if I could resize the image before doing the adjustments, but I dont want to create copies and then link to those. Maybe there is a way to generate the images on the fly and serve them up? Via REST perhaps? Bottom line is I need a LOSSY image resize, not just setting width and height using css.
Are there tools out there that I am missing or has anyone done something similar? I think what Im looking for is exactly like google image search results- but I don't know how they generate those thumbnails- and if I were to adjust brightness/contrast am I doing it on the thumbail (saving time) or the full size image?
I am trying to combine canvas that change colour in response to consumer's choice. I have placed PNG's onto multiple canvas with transparent backgrounds. I need to combine them and save a png of the final image to pass to the basket and post to my server. Can anyone help? You can see the page and code at http://www.ewe.potberrys.com/colour_image_3.php. Please excuse the quality of the code. I am new :) Thanks
I would suggest do not save the PNG. Just save the colors with your order (you have to do it anyways) and render the helmet in the basket with the same approach you do in the selector tool.
It would probably be possible (but I am not 100% sure) to generate an image on the client side in Chrome and post it via a hidden form, but the stack is so experimental, that it is not ready for production.
A little easier, one can do it with ImageMagic and PHP on the server side. I am not a PHP expert, but you can easily google an example code - there is plenty.
My advice: do not bother. Just have tidy up your JavaScript that renders a helmet to be usable in multiple places with multiple dimensions.