Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/417.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在React Native中裁剪图像,使其';你会喜欢圆形而不是矩形吗?_Javascript_React Native_Image Processing - Fatal编程技术网

Javascript 如何在React Native中裁剪图像,使其';你会喜欢圆形而不是矩形吗?

Javascript 如何在React Native中裁剪图像,使其';你会喜欢圆形而不是矩形吗?,javascript,react-native,image-processing,Javascript,React Native,Image Processing,我确实有一些图片,我需要将它们裁剪成圆形,然后在React Native中使用它们作为React viro(一个渲染3600个图像的库)中的ViroImage 我不能对图片应用太多的样式,而边框半径似乎不能解决我的问题。当我必须在客户端处理图像时,我创建了一个库,但找不到任何值得使用的东西。试试看 例如: const image=image.resolveAssetSource(require('./my image.jpg)).uri; const maskImage=Image.resolv

我确实有一些图片,我需要将它们裁剪成圆形,然后在React Native中使用它们作为React viro(一个渲染3600个图像的库)中的ViroImage

我不能对图片应用太多的样式,而
边框半径似乎不能解决我的问题。

当我必须在客户端处理图像时,我创建了一个库,但找不到任何值得使用的东西。试试看

例如:

const image=image.resolveAssetSource(require('./my image.jpg)).uri;
const maskImage=Image.resolveAssetSource(require('../mask Image.png)).uri;
RNImageTools.mask(图像,maskImage).then({uri,width,height})=>{
//与应用程序状态同步
});
请注意,在iOS上,你的遮罩图像应该是黑白的,在Android上,你的遮罩图像应该是透明的。黑色部分将替换为图像,白色/透明部分将变为透明。您可以在名称上使用.android和.ios后缀,RN将有条件地加载它们


您也可以使用
createMaskFromShape
方法创建遮罩,但您必须自己生成形状点。

创建一个边框半径为30的容器,然后将图像放在其中