Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
@oguzhnatly/react-native-image-manipulator
Advanced tools
ImageManipulator for react native without Expo and Unimodules. Based on Expo ImageManipulator
Readme
$ npm install @oguzhnatly/react-native-image-manipulator --save
$ yarn add @oguzhnatly/react-native-image-manipulator
$ cd ios && pod install
$ react-native link @oguzhnatly/react-native-image-manipulator
Libraries
➜ Add Files to [your project's name]
node_modules
➜ @oguzhnatly
➜ react-native-image-manipulator
and add RNImageManipulator.xcodeproj
libRNImageManipulator.a
to your project's Build Phases
➜ Link Binary With Libraries
Cmd+R
)<android/app/src/main/java/[...]/MainActivity.java
import com.oguzhnatly.rnimagemanipulator.RNImageManipulatorPackage;
to the imports at the top of the filenew RNImageManipulatorPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-image-manipulator'
project(':react-native-image-manipulator').projectDir = new File(rootProject.projectDir, '../node_modules/@oguzhnatly/react-native-image-manipulator/android')
android/app/build.gradle
:
compile project(':react-native-image-manipulator')
RNImageManipulator.manipulate(uri, actions, saveOptions)
Manipulate the image provided via uri
. Available modifications are rotating, flipping (mirroring), resizing and cropping. Each invocation results in a new file. With one invocation you can provide a set of actions to perform over the image. Overwriting the source file would not have an effect in displaying the result as images are cached.
uri (string) -- URI of the file to manipulate. Should be in the app's scope.
actions (array) --
An array of objects representing manipulation options. Each object should have one of the following keys:
{ width, height }
. Values correspond to the result image dimensions. If you specify only one value, the other will be set automatically to preserve image ratio.{ vertical, horizontal }
. Having a field set to true, flips the image in specified axis.{ originX, originY, width, height }
. Fields specify top-left corner and dimensions of a crop rectangle.saveOptions (object) -- A map defining how modified image should be saved:
'jpeg'
or 'png'
. Specifies what type of compression should be used and what is the result file extension. PNG compression is lossless but slower, JPEG is faster but the image has visible artifacts. Defaults to 'jpeg'
.Returns { uri, width, height }
where uri
is a URI to the modified image (useable as the source for an Image
/Video
element), width, height
specify the dimensions of the image. It can contain also base64
- it is included if the base64
saveOption was truthy, and is a string containing the JPEG/PNG (depending on format
) data of the image in Base64--prepend that with 'data:image/xxx;base64,'
to get a data URI, which you can use as the source for an Image
element for example (where xxx
is 'jpeg' or 'png').
This will first rotate the image 90 degrees clockwise, then flip the rotated image vertically and save it as a PNG.
import React from "react";
import { Button, TouchableOpacity, Text, View, Image } from "react-native";
import RNImageManipulator from "@oguzhnatly/react-native-image-manipulator";
import Colors from "../constants/Colors";
export default class ImageManipulatorSample extends React.Component {
state = {
ready: false,
image: null
};
componentWillMount() {
(async () => {
const image = Asset.fromModule(require("../path/to/image.jpg"));
await image.downloadAsync();
this.setState({
ready: true,
image
});
})();
}
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ padding: 10 }}>
<Button onPress={this._rotate90andFlip} />
{this.state.ready && this._renderImage()}
</View>
</View>
);
}
_rotate90andFlip = async () => {
const manipResult = await RNImageManipulator.manipulate(
this.state.image.localUri || this.state.image.uri,
[{ rotate: 90 }, { flip: { vertical: true } }],
{ format: "png" }
);
this.setState({ image: manipResult });
};
_renderImage = () => {
return (
<View
style={{
marginVertical: 10,
alignItems: "center",
justifyContent: "center"
}}
>
<Image
source={{ uri: this.state.image.localUri || this.state.image.uri }}
style={{ width: 300, height: 300, resizeMode: "contain" }}
/>
</View>
);
};
}
FAQs
ImageManipulator for react native without Expo and Unimodules. Based on Expo ImageManipulator
The npm package @oguzhnatly/react-native-image-manipulator receives a total of 786 weekly downloads. As such, @oguzhnatly/react-native-image-manipulator popularity was classified as not popular.
We found that @oguzhnatly/react-native-image-manipulator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.