ImageEditor关于react-native远程加载网络图片并截取自己需要的部分

最新推荐文章于 2024-09-11 08:16:25 发布

辉呀

最新推荐文章于 2024-09-11 08:16:25 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： ImageEditor Android端开发

本文链接：https://blog.youkuaiyun.com/weixin_43481812/article/details/83271714

本文介绍了在react-native中如何使用ImageEditor组件来远程加载网络图片并截取特定部分。作者分享了一个简单的demo，适用于新手学习，但需要注意的是，该方法仅支持网络图片URI，不适用于本地图片。文章最后，作者期待能有大神提供截取本地图片的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次写博客，也没有什么经验，有什么不对的地方大家多多指教。今天写这篇博客是因为最近在学react-native 编写Android页面，需要从一张图片截取自己想要的部分，比如下面这张图片是张网络图片。在这里插入图片描述
想要从该图片截取其中第一行第二个太阳天气图标自己使用，在Css中本来很简单，但是react-native并不支持。查看文档后发现了ImageEditor可以实现，但是对于新手来说，没有一个例子很难看懂，而我也上网搜索过例子，并没有发现易懂例子。经过学习，我也是学了ImageEditor的方法，下面将有一个小demo便于大家如何使用ImageEditor去截取自己想要的图片。提前说一下，这个demo中的uri只支持网络地址，本地地址试过很多遍都难以成功。

import React, {Component} from 'react';
 import {ImageEditor,
        TouchableOpacity,
        Alert,Dimensions,
        StyleSheet,Text,
        TextInput,
        View,
        Image} from 'react-native';
//该方法只支持远程加载图片裁剪，不支持本地图片裁剪，
//主要因为本地uri地址表达方式不会,试过相对路径和绝对路径都不行

 var {height, width} = Dimensions.get('window');

 //要裁剪图片的规格：
 const cropData = {
     offset: {x: 184, y: 0},//从原图裁剪的起始坐标
     siz