React Native: Draw on image with only JS code - javascript

In my app, after use selects an image from gallery, he needs to black out some part of it. for example draw a black line where there are some names or signatures.
Is it possible to achieve this with JS only? or do I have to make some native views separately for android/ios and implement it to react native?
or is there any image picker modules which provides such a feature?

It's a little bit late, but I think this library will do the trick:
https://www.npmjs.com/package/#terrylinla/react-native-sketch-canvas
You can load a picture beforehand as your canvas with the localSourceImageprop.

Related

Image manipulation in React Native?

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.

create Carousel in React Native like example image

I want to create slider in carousel in react native like the example image below, Is there any library out there or some tutorial to make like the example image ?
Or can someone write a part of code to help me write such a slider?
can i write this carousel with FlatList?
You can write your own slider with ScrollView or FastList.
Check this tutorial to understand the basics of creating a carousel with ScrollView https://blog.logicwind.com/carousel-using-react-native-scrollview/
Also, you could use react-native-snap-carousel library which offers many features and customizations.

framework to create tooltip (createjs and kineticjs)

I'm searching for a JS framework that is compatible with CreateJS and KineticJS to create tooltips on a canvas.
I'm making an app that uses both CreateJSs and KineticJS and I want to draw tooltips on both of them (without using two libraries).
Thank you.
There are dozens (if not hundreds) of tooltip scripts out there—just ask google!
I assume that since you want to support both createJS and kineticJS that you must have already coded the trigger that requests a tooltip.
With that in mind, here is one tooltip library: http://www.opentip.org/documentation.html
It’s open-source so you can use/modify it freely.
It’s controlled by javascript so you have createJS/kineticJS independence while still working in JS.
It uses html canvas to display the tip so customizations should be familiar to you.
The tip-canvas is temporary and it floats so it should not interfere with your main canvas.
It allows you to offset the tooltip, so your code can exactly position the tip as you need.

how to make image slider in dojo?

I've seen this image slider on the front page of http://www.ibm.com/us/en/ and I want to have one like that for my site. (After a timeout, the first image slides out of the screen, then the second image flies out after it, and then a new pair fly in).
I've seen that IBM uses Dojo not jQuery. Is this built in effect in dojo?
I have knowledge in javascript (but not any library like jQuery/dojo) and I can make it myself the hard-way. But I wanted to know first if there is anything built in to do it?
I think you might be better off with dojox.widget.Rotator or even dojox.widget.AutoRotator.
The image slider on the IBM.com front page is built using Dojo, but not a out-of-box component of Dojo library. It's a customized component.
If you want to create image sliders using Dojo, take a look at existing out-of-box components in DojoX library (dojox.image). dojox.image.SlideShow is a good starting point.

Animate PNGs with jQuery?

Is there a simple plugin or some robust code that would allow me to animate PNGs with a simple start and stop method? TSM, Alex.
[Edit: I made a jQuery plugin that animates PNGs. Will post when it's all done.]
While this is not an "off-the-shelf" plugin, you may be intrested in checking out the following tutorial:
Building an Animated Cartoon Robot with jQuery
It uses PNG images for all the layers. It explains how to implement a startHim() method, which I'm sure you'll be able to convert into a stopHim(). You may probably be able to skim through it, unless you are trying to do something similar.

Categories