如何在react-native中访问图像像素数据
How to access image pixel data in react-native
我有一个从相机胶卷或任何其他来源加载的图像,通常是本地的。
我如何访问它的像素数据图来执行一些计算或测量?
有一种方法可以使用本地模块获取此信息,但我目前只有Android实现。在RN 0.42.3上测试。首先,你需要在你的应用程序中创建一个本地模块。假设应用程序的初始化名称为SampleApp
,在你的React native项目android/app/src/main/java/com/sampleapp/bitmap
中创建一个新目录,其中包含两个文件:
android/app/src/main/java/com/sampleapp/bitmap/BitmapReactPackage.java
package com.sampleapp;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class BitmapReactPackage implements ReactPackage {
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new BitmapModule(reactContext));
return modules;
}
}
android/app/src/main/java/com/sampleapp/bitmap/BitmapModule.java
package com.sampleapp;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.WritableNativeArray;
import com.facebook.react.bridge.WritableNativeMap;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import java.io.IOException;
public class BitmapModule extends ReactContextBaseJavaModule {
public BitmapModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "Bitmap";
}
@ReactMethod
public void getPixels(String filePath, final Promise promise) {
try {
WritableNativeMap result = new WritableNativeMap();
WritableNativeArray pixels = new WritableNativeArray();
Bitmap bitmap = BitmapFactory.decodeFile(filePath);
if (bitmap == null) {
promise.reject("Failed to decode. Path is incorrect or image is corrupted");
return;
}
int width = bitmap.getWidth();
int height = bitmap.getHeight();
boolean hasAlpha = bitmap.hasAlpha();
for (int x = 0; x < width; x++) {
for (int y = 0; y < height; y++) {
int color = bitmap.getPixel(x, y);
String hex = Integer.toHexString(color);
pixels.pushString(hex);
}
}
result.putInt("width", width);
result.putInt("height", height);
result.putBoolean("hasAlpha", hasAlpha);
result.putArray("pixels", pixels);
promise.resolve(result);
} catch (Exception e) {
promise.reject(e);
}
}
}
正如您在第二个文件中看到的,有一个方法getPixels
,它将作为Bitmap
本机模块的一部分从JS中可用。它接受图像文件的路径,将图像转换为内部位图类型,这允许读取图像像素。所有图像像素被一个接一个地读取,并以十六进制字符串的形式保存到像素数组中(因为React Native不允许通过桥传递十六进制值)。这些十六进制字符串有8个字符,每个ARGB通道2个字符:前两个字符是alpha通道的十六进制值,第二个两个-用于红色,第三个两个-用于绿色,最后两个-用于蓝色通道。例如,ffffffff
-为白色,ff0000ff
-为蓝色。为了方便起见,图像宽度,高度和alpha通道的存在与像素数组一起返回。方法返回一个带有对象的承诺:
{
width: 1200,
height: 800,
hasAlpha: false,
pixels: ['ffffffff', 'ff00ffff', 'ffff00ff', ...]
}
原生模块也必须在应用程序中注册,修改android/app/src/main/java/com/sampleapp/MainApplication.java
并在那里添加新模块:
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BitmapReactPackage() // <---
);
}
如何使用from JS:
import { NativeModules } from 'react-native';
const imagePath = '/storage/emulated/0/Pictures/blob.png';
NativeModules.Bitmap.getPixels(imagePath)
.then((image) => {
console.log(image.width);
console.log(image.height);
console.log(image.hasAlpha);
for (let x = 0; x < image.width; x++) {
for (let y = 0; y < image.height; y++) {
const offset = image.width * y + x;
const pixel = image.pixels[offset];
}
}
})
.catch((err) => {
console.error(err);
});
我需要提到的是,它执行得非常慢,很可能是因为通过桥传输了一个巨大的数组。
谢谢Michael。今天似乎容易多了
import { RNCamera } from 'react-native-camera';
<RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}></RNCamera>
//Set the options for the camera
const options = {
base64: true
};
// Get the base64 version of the image
const data = await this.camera.takePictureAsync(options)
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 画布:逐像素绘制图像并请求动画帧计时
- 获取图像的平均外部像素颜色
- 使用回调获取图像像素数据
- ExtJS:“图像”类型的精灵:如何更改像素
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 在图像像素加载时提交表单
- 如何将图像像素转换为纬度和液化天然气中的相同位置以供谷歌地图使用
- 鼠标移动时获取fabric.js中图像像素的rgb值
- Javascript获取Facebook个人资料图像像素数据
- 图像像素化后的CSS转换
- 读取图像像素
- 获取图像像素数据
- 如何在图像上实现框模糊动画?[使图像像素化]
- 我可以用一个图像像素调用多个跟踪像素吗
- 如何在Webos Palm js中替换图像像素
- 点击通过透明图像像素
- 在javascript中提取png图像像素的值
- 图像像素X、Y坐标为经纬度
- 如何在react-native中访问图像像素数据