crop.swift

struct ContentViews: View {

  @State var imageWidth: CGFloat = 0
  @State var imageHeight: CGFloat = 0

  @State private var rotationAngle: Double = 0
  @State private var wdt: Double = 0
  @State private var hgt: Double = 0
  @State private var cropRect = CGRect(x: 0, y: 0, width: 200, height: 200)
  @State var image: UIImage

  var body: some View {
    VStack {
      Button(action: {
        withAnimation {
          self.cropRect.size.width = 200
          self.cropRect.size.height = 200
        }
      }) {
        Text("scale")
      }
      Button(action: {
        withAnimation {
          rotationAngle += 90
        }
      }) {
        Text("Rotate")
      }
      // The actual crop function
      //bug: the crop area is wrong
      Button(action: {
        let imagePos = CGPoint(
          x: (wdt - image.size.width + self.cropRect.origin.x),
          y: (hgt - image.size.height + self.cropRect.origin.y))
        let rect = CGRect(
          x: self.cropRect.origin.x - imagePos.x, y: self.cropRect.origin.y - imagePos.y,
          width: self.cropRect.width, height: self.cropRect.height)
        let croppedImage = image.cgImage?.cropping(to: rect)
        upload(image: UIImage(cgImage: croppedImage!))
      }) {
        Text("Crop")
      }
      ZStack {
        GeometryReader { geo in
          Image(uiImage: image)
            .resizable()
            .scaledToFit()
            .clipped()
            .rotationEffect(.degrees(rotationAngle))

          Rectangle()
            .stroke(Color.white, lineWidth: 2)
            .background(Color.black.opacity(0.8))
            .position(x: self.cropRect.midX, y: self.cropRect.midY)
            .frame(width: cropRect.size.width, height: cropRect.size.height)
            //bug: if we rotate the image the rectangle is out of bounds
            .rotationEffect(.degrees(rotationAngle))
            .gesture(
              DragGesture()
                // bug: the rectngle can move outside the image
                .onChanged { value in
                  let x = value.location.x - (self.cropRect.width / 2)
                  let y = value.location.y - (self.cropRect.height / 2)
                  let maxX = geo.size.width - self.cropRect.width
                  let maxY = geo.size.height - self.cropRect.height

                  self.cropRect.origin.x = min(max(x, 0), maxX)
                  self.cropRect.origin.y = min(max(y, 0), maxY)

                }
            ).onAppear {
              wdt = geo.size.width
              hgt = geo.size.height
              cropRect = CGRect(x: 0, y: 0, width: 200, height: 200)
            }
        }
      }
    }
  }
}