Как обрезать изображение и рисовать прямоугольники на изображении в React Native

Question

Я использую Expo и реагирую на нативный, чтобы попытаться создать интерфейс обрезки изображений, где я хочу обрезать квадратные изображения большего исходного изображения. и на исходном изображении оставьте уже вырезанную часть красным квадратом. (Эта разметка должна быть на изображении, а не на уровне интерфейса выше, чтобы изображение впоследствии могло быть загружено на сервер.) Пример: изображение

Я пытался использовать некоторые библиотеки отсечения, но они либо не были совместимы с экспозицией, и / или не возвращали координаты разреза, поэтому я мог попытаться реализовать логику для отметки места разреза. Затем я начал пытаться разработать что-то на основе ScrollView, но у меня уже были некоторые проблемы. Исходное изображение имеет высокое разрешение, поэтому я могу увеличивать фрагменты, которые хочу обрезать, и при этом получать качественное обрезанное изображение, за исключением того, что изображение внутри прокрутки уменьшается и имеет низкое качество, ограничивая его размер размерами устройства. а также не может получить информацию о положении изображения в окне прокрутки, чтобы обрезать его. Это то, что я до сих пор вырезал:

<View style={{
      flex: 1,
      height: '50%',
      backgroundColor: '#666',
    }}>


      <ScrollView
        contentContainerStyle={{ 
          justifyContent: 'center',
          alignItems: 'center', 
        }} //flexbox styles
        centerContent //centers content when zoom is less than scroll view bounds 
        maximumZoomScale={this.props.maximumZoomScale}
        minimumZoomScale={this.props.minimumZoomScale}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        ref={this.setZoomRef} //helps us get a reference to this ScrollView instance
        style={{ overflow: 'hidden' }}
        onScroll={this.onScrollUpdate.bind(this)}
       >
         <Image
          style={{ width: width, height: height/2, resizeMode: 'contain' }}
          source={require('./assets/exemplo1.jpg')}
         />
       </ScrollView>


    </View>

И чтобы пометить изображение, лучшее, что я до сих пор достиг, это использование Svg на выставке, но у меня было две проблемы: координаты для визуализации прямоугольника - это не оригинальное изображение, а изображение, отображаемое в представлении. , а также с помощью SVG я не могу сгенерировать PNG / JPG изображения с маркировкой.

<Svg height={height/2} width={width}>
        <Svg.Image
          x="0"
          y="0"
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid slice"
          //opacity="0.5"
          href={require('./assets/exemplo1.jpg')}
          //clipPath="url(#clip)"
        />

        { this.state.vetor.map(mrc =>
          <Svg.Rect
            x=mrc.x//{200}
            y=mrc.y
            width={marc.w}
            height={mrc.h}
            strokeWidth={2}
            stroke="red"
            fill="transparent"
          />
        )}


      </Svg>