在 Flutter 移动应用中添加图像水印

Question

我一直在查看image package examples。绘制图像的示例使用 dart:html 包。

我设法将图像和 dart:ui 结合使用，但运行速度非常慢。有谁知道什么是更好的方法？

      final double canvasWidth = canvasImage.width.toDouble();
      final double canvasHeight = canvasImage.height.toDouble();
      final ui.Paint paint = ui.Paint();

      final recorder = ui.PictureRecorder();
      final canvas = ui.Canvas(
        recorder,
        ui.Rect.fromPoints(
          ui.Offset(0.0, 0.0),
          ui.Offset(canvasWidth, canvasHeight),
        ),
      );

      // draw image to background
      ui.Codec backgroundCodec =
          await ui.instantiateImageCodec(img.encodePng(canvasImage));
      final ui.FrameInfo backgroundFrameInfo =
          await backgroundCodec.getNextFrame();
      final ui.Image backgroundImage = backgroundFrameInfo.image;
      canvas.drawImage(backgroundImage, ui.Offset(0.0, 0.0), paint);

      // Add watermark
      // Get watermark from assets
      final ByteData watermarkBytes =
          await rootBundle.load("images/watermark.png");
      img.Image originalWatermark =
          img.decodeImage(watermarkBytes.buffer.asUint8List());

      // resize the watermark to 1/6th of the smallest dimension (the watermark is a square)
      final int watermarkDimension =
          (min(canvasWidth, canvasHeight) / 6).floor();
      img.Image resizeImage = img.copyResize(originalWatermark,
          height: watermarkDimension, width: watermarkDimension);
      ui.Codec watermarkCodec =
          await ui.instantiateImageCodec(img.encodePng(resizeImage));
      final ui.FrameInfo watermarkFrameInfo =
          await watermarkCodec.getNextFrame();

      // get ui image
      ui.Image watermarkImage = watermarkFrameInfo.image;

      // draw watermark to the canvas
      canvas.drawImage(watermarkImage, ui.Offset(0.0, 0.0), paint);

      // export the recording
      ui.Picture pic = recorder.endRecording();
      ui.Image finalImage =
          await pic.toImage(canvasWidth.floor(), canvasHeight.floor());
      ByteData finalByteData =
          await finalImage.toByteData(format: ui.ImageByteFormat.png);

Answer 1

我遇到的是使用图像库很慢，或者我使用 RepaintBoundary 来截取某个小部件：

用一个键将你的小部件包裹在 RepaintBoundary 中

RepaintBoundary(
              key: _repaintKey,
              child: Stack(
                alignment: Alignment.bottomRight,
                children: <Widget>[
                  Image.asset(
                    'images/food01.jpeg',
                    fit: BoxFit.cover,
                  ),
                  Icon(Icons.translate,),
                ],
              ),
            )

然后写入字节：

    RenderRepaintBoundary boundary =
                    _repaintKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
File(tempPath).writeAsBytes(pngBytes);