0

I'm using flutter as a module for my native app - Swift for iOS and Kotlin for Android. I'm trying to create and rotate an image using canvas.

On Android it works perfectly but on iOS it just returns a blank image. I've also tested by creating a brand new flutter app and built on an iOS device, it also works fine.

I am following Platform integration to integrate Flutter into my native Swift project

void getImage() {
  ui.Image image = await getNetworkImage(imageURL);
  ui.Image rotatedImage = await rotatedImage(image: image, angle: -pi / 2);
  ByteData? byteData = await rotatedImage.toByteData(format: ui.ImageByteFormat.png);
  Uint8List? intList = byteData?.buffer.asUint8List();
  // Use this to show the rotated image on a widget
}

Future<ui.Image> getNetworkImage(String path) async {
  var completer = Completer<ImageInfo>();
  var img = new NetworkImage(path);
  img.resolve(const ImageConfiguration()).addListener(ImageStreamListener((info, _) {
    completer.complete(info);
  }));
  ImageInfo imageInfo = await completer.future;
  return imageInfo.image;
}

Future<ui.Image> rotatedImage({required ui.Image image, required double angle}) async {
  var pictureRecorder = ui.PictureRecorder();
  Canvas canvas = Canvas(pictureRecorder);

  final double r = sqrt(image.width * image.height + image.height * image.width) / 2;
  final alpha = atan(image.width / image.height);
  final beta = alpha + angle;
  final shiftY = r * sin(beta);
  final shiftX = r * cos(beta);
  final translateX = image.width / 2 - shiftX;
  final translateY = image.height / 2 - shiftY;
  canvas.translate(translateX, translateY);
  canvas.rotate(angle);
  canvas.drawImage(image, Offset.zero, Paint());

  final result = await pictureRecorder.endRecording().toImage(image.width, image.height);
  return result;
}

  • what's the point in calculating `final alpha = ...`? what exact result do you want to achieve? some image maybe? – pskink Jul 16 '22 at 05:31
  • @pskink I'm just following an answer from this https://stackoverflow.com/questions/51323233/flutter-how-to-rotate-an-image-around-the-center-with-canvas – Khang Hồ Jul 18 '22 at 00:53
  • @pskink this works the same as the code I provided anyways. The issue I'm facing is that this is a module (iOS framework and Android aar) it only works for Android, not iOS. And when I make a flutter project, it works perfectly on both. Is there anything I have to enable when making an iOS framework from this module for it to work properly – Khang Hồ Jul 19 '22 at 04:15
  • did you run it without any changes? if so, do you really mean that saved `rotated.png` image is blank empty? – pskink Jul 19 '22 at 04:23
  • @pskink I did change some parts of your code, like adding the storage path to save the file. And yes, the image is empty. – Khang Hồ Jul 19 '22 at 04:33
  • just for test, is it still blank if you remove `canvas.transform`? if so, did you try to see if simple `drawRect` or any other drawing primitive works at all? – pskink Jul 22 '22 at 09:25
  • @pskink I tried to create a simple rect and it didn't work either. I also tried to turn a widget to ui.Image and it didn't work, using this https://stackoverflow.com/questions/41957086/creating-raw-image-from-widget-or-canvas – Khang Hồ Jul 25 '22 at 08:39
  • post then the full, minimal code showing your issue – pskink Jul 25 '22 at 18:36
  • @pskink The issue I'm having is probably with the fluter engine when using the host view for iOS. The code works perfectly on a Flutter app, it only doesn't work when creating a framework for an existing iOS app. Anyways, thanks a lot for your help! We decided to use native side library to resolve the issue. P/s: I've been using `matrix_gesture_detector` so thank you again! – Khang Hồ Jul 27 '22 at 02:40

0 Answers0