我在图像上添加了水印，但图像未加载

Question

我在图片上使用了水印，我看到了https://medium.com/flutter-community/add-watermark-over-image-in-flutter-e7353e3cf603这篇文章的水印！一切都很好，但我无法加载“PNG图像”！请帮助我摆脱困境

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

import 'package:image/image.dart' as ui;

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

File _originalImage;
File _watermarkImage;
File _watermarkedImage;
final picker = ImagePicker();

Future getOriginalImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
  _originalImage = File(pickedFile.path);
});
}

Future getWatermarkImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
  _watermarkImage = File(pickedFile.path);
});
}

@override
void initState() {

super.initState();
}

@override
Widget build(BuildContext context) {

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    appBar: AppBar(title: Text("Watermark Example"),),
    body: Center(
      child: Column(
        children: <Widget>[
       //<--------------- select original image ---------------->
          _originalImage==null? FlatButton(
            child: Text("Select Original Image"),
            onPressed: getOriginalImage,
          )
              : Image.file(_originalImage),

             //<--------------- select watermark image ---------------->
           _watermarkImage==null? FlatButton(
            child: Text("Select Watermark Image"),
            onPressed: getWatermarkImage,
          )
              : Image.file(_watermarkImage),

          SizedBox(height: 50,),
             //<--------------- apply watermark over image ---------------->
          (_originalImage!=null)&&(_watermarkImage!=null)?
          FlatButton(
            child: Text("Apply Watermark Over Image"),
            onPressed: () async {

              ui.Image originalImage = ui.decodeImage(_originalImage.readAsBytesSync());
              ui.Image watermarkImage = ui.decodeImage(_watermarkImage.readAsBytesSync());

              // add watermark over originalImage
              // initialize width and height of watermark image
              ui.Image image = ui.Image(160, 50);
              ui.drawImage(image, watermarkImage);

              // give position to watermark over image
              // originalImage.width - 160 - 25 (width of originalImage - width of watermarkImage - extra margin you want to give)
              // originalImage.height - 50 - 25 (height of originalImage - height of watermarkImage - extra margin you want to give)
              ui.copyInto(originalImage,image, dstX: originalImage.width - 160 - 25, dstY: originalImage.height - 50 - 25);


              // for adding text over image
              // Draw some text using 24pt arial font
              // 100 is position from x-axis, 120 is position from y-axis
              ui.drawString(originalImage, ui.arial_24, 100, 120, 'Think Different');


              // Store the watermarked image to a File
              List<int> wmImage = ui.encodePng(originalImage);
              setState(() {
                _watermarkedImage = File.fromRawPath(Uint8List.fromList(wmImage));
              });

            },
          )
              : Container(),

          //<--------------- display watermarked image ---------------->
          _watermarkedImage!=null?
          Image.file(_watermarkedImage) 
                 // HOW TO LOAD THIS "�PNG" IMAGE     
              : Container(),


        ],
      ),
    ),
  ),
);
}

}

运行后出现错误：无法打开文件，路径 = '�PNG IHDR bq�+��IDATx����8�%��4w�̪��_�-27������2��H����*����gT%�Ҝ�P�a ������k�u۶����{�o�������9||��������o8�������������?��s| ���eYj��Q�m���� 㖶}��}~}���RJ������}��ѷ�xr�r2�>~���������� `  KO^J��K��s����Z^s�!����ל;ζm�G&0��e�G$g��q�˸�V�x������ �e��,@����md�t�hom�9�"��x����˘H�|���J)2�1�R��Z���|�3㧆c |O�WN(c��D���z�����x�Ǚ�䢞vN !X

Answer 1

即使我不确定这是您的问题，我也会指出ui.encodePng(originalImage) 的结果是Uint8List。

所以，我建议您将代码更改为：

Uint8List wmImage = ui.encodePng(originalImage);
setState(() {
  _watermarkedImage = File.fromRawPath(wmImage);
});

我很确定您的错误是将 PNG 的字节作为文件打开的结果，而您只有 PNG 的字节。

如果还是不行的话

如in this answer 所述，您可能需要将生成的文件保存到临时文件中，以便能够从原始路径加载它。

在这种情况下，你应该写：

Uint8List wmImage = ui.encodePng(originalImage);

final String tempDir = (await getTemporaryDirectory()).path;
final File tempFile = File("$tempDir/tempImage.png");
file.writeAsBytesSync(wmImage);

setState(() {
  _watermarkedImage = tempFile;
});

这会增加一些毫秒的计算时间，但它更稳定和健壮，因为它只将文件保存在内存中。