Flutter中实现图片分享时添加文字水印的技术求助

Hey there! Let's tackle adding a text watermark to your shared image using Flutter. The drawString approach you came across relies on Flutter's Canvas API, and I'll walk you through integrating it into your existing share logic step by step.

First, make sure you have these imports at the top of your file (if they're not already there):

import 'dart:ui' as ui;
import 'dart:typed_data';
import 'package:http/http.dart' as http;
import 'package:share_plus/share_plus.dart';

Now let's revamp your _onShare function to include watermark rendering:

void _onShare() async {
  // 1. Fetch the original image bytes from the URL
  final response = await http.get(Uri.parse(imagepath));
  if (response.statusCode != 200) {
    // Handle error if image fails to load (e.g., show a snackbar)
    return;
  }
  Uint8List originalImageBytes = response.bodyBytes;

  // 2. Decode the image to get its dimensions
  ui.Codec imageCodec = await ui.instantiateImageCodec(originalImageBytes);
  ui.FrameInfo frameInfo = await imageCodec.getNextFrame();
  ui.Image originalImage = frameInfo.image;

  // 3. Set up canvas to draw the watermark
  final pictureRecorder = ui.PictureRecorder();
  final canvas = ui.Canvas(pictureRecorder);
  final paint = ui.Paint();

  // Draw the original image as the base layer
  canvas.drawImage(originalImage, ui.Offset.zero, paint);

  // 4. Configure your watermark text style
  final watermarkTextStyle = ui.TextStyle(
    color: ui.Color.fromARGB(120, 0, 0, 0), // Semi-transparent black
    fontSize: 32,
    fontWeight: ui.FontWeight.w600,
  );
  final textSpan = ui.TextSpan(
    text: "Your Custom Watermark", // Replace with your desired text
    style: watermarkTextStyle,
  );
  final textPainter = ui.TextPainter(
    text: textSpan,
    textDirection: ui.TextDirection.ltr,
  );

  // 5. Position the watermark (example: bottom-right corner with padding)
  textPainter.layout();
  final watermarkOffset = ui.Offset(
    originalImage.width - textPainter.width - 25,
    originalImage.height - textPainter.height - 25,
  );
  textPainter.paint(canvas, watermarkOffset);

  // 6. Convert the canvas to a byte array
  final picture = pictureRecorder.endRecording();
  final watermarkedImage = await picture.toImage(originalImage.width, originalImage.height);
  final byteData = await watermarkedImage.toByteData(format: ui.ImageByteFormat.png);
  final watermarkedBytes = byteData!.buffer.asUint8List();

  // 7. Share the watermarked image
  await Share.file(
    'ESYS AMLOG',
    'watermarked_image.png',
    watermarkedBytes,
    'image/png',
    text: "Hello",
  );

  // Clean up to free memory
  originalImage.dispose();
}

Key Breakdown of the Changes: #

• Image Decoding: We decode the original image to get its width and height, which lets us position the watermark accurately relative to the image bounds.
• Canvas Drawing: We use a PictureRecorder and Canvas to first draw the original image, then overlay the text watermark on top.
• Watermark Customization: You can tweak the text content, color (using ARGB for transparency), font size, and weight to match your app's design.
• Positioning: The example places the watermark in the bottom-right corner with padding, but you can adjust the watermarkOffset values to move it anywhere (center, top-left, etc.).
• Memory Management: We dispose of the original image after use to avoid memory leaks.

Quick Notes: #

• Ensure the share_plus package is added to your pubspec.yaml (your original code uses Share.file, so this is probably already set up).
• If you're working with local images instead of network ones, replace the http.get step with code to load bytes from the local file system or asset bundle.
• Play around with the text style and position until you get the exact watermark look you want!

内容的提问来源于stack exchange，提问作者Raees Khatib