在照片抖动上添加文本，就像在 instgram 中为照片添加标题一样

Question

我怎样才能让用户在图像上创建一个标题，然后将这个标题与图像文件集成，这样它就会显示为一个带有文本的图像文件

喜欢这个UI 在此输入图片描述

• 这是我取得的进步

  Future<void> uploadImageWithCaption(Color color,double dx,double dy,String caption,double fontSize,String fontFamily) async {
  //  print("caption : $caption");

    // Load the image
     final image2 = img.decodeImage(File(image!.path).readAsBytesSync())!;

    // Add text to the image

    img.drawString(image2,caption,font: img.arial48 ,x: 700 ,y: 1400,color:img.ColorRgb8(color.red,color.green,color.blue));

    // Save the image with caption
    final newImageFile = File('${image!.path}_with_caption.jpg');
    newImageFile.writeAsBytesSync(img.encodeJpg(image2));

    await uploadStoryImage('image', XFile(newImageFile.path));
  }

• 我使用字符串抽屉将其放在具有我需要的颜色的图像文件中，但不能采取更多的操作，例如如何自定义此文本在照片上的位置以及如何自定义字体大小或最好的原因是什么实现这个功能

Answer 1

尝试以下操作：

Future<void> uploadImageWithCaption(Color color, double dx, double dy, String caption, double fontSize, String fontFamily) async {
  final image2 = img.decodeImage(File(image!.path).readAsBytesSync())!;

  final canvasWidth = image2.width;
  final canvasHeight = image2.height;
  final pictureRecorder = PictureRecorder();
  final canvas = Canvas(pictureRecorder);

 canvas.drawImage(image2, 0.0, 0.0);

  final textPainter = TextPainter(
    text: TextSpan(
      text: caption,
      style: TextStyle(
        color: Color(color.value), 
        fontSize: fontSize,
        fontFamily: fontFamily,
      ),
    ),
  );

 
  textPainter.layout(maxWidth: canvasWidth - 20.0, maxHeight: canvasHeight - 20.0);  
  final textOffset = Offset((canvasWidth - textPainter.width) / 2.0, (canvasHeight - textPainter.height - dy) / 2.0); 

 
  textPainter.paint(canvas, textOffset);

 
  final img = await pictureRecorder.endRecording().toImage(canvasWidth, canvasHeight);

 
  final newImageFile = File('${image!.path}_with_caption.jpg');
  newImageFile.writeAsBytesSync(img.toByteData().buffer.asUint8List());

  await uploadStoryImage('image', XFile(newImageFile.path));
}

这种改进的响应提供了强大的、可定制的功能，可以通过用户指定的文本位置、字体大小和其他潜在的增强功能为图像添加标题。