为了复用flutter能力，提高代码维护性，所以将原生生成水印的操作移动到flutter层面处理，减少了原生代码的维护复杂程度。（当然在flutter层处理图片，效率没有原生层面高）
考虑：
1.首先考虑到代码侵入性，所以决定继承ImageProvider。
2.考虑到缓存的问题，如果需要每次生成新的缓存，就需要将cacheKey所相关的逻辑进行改动。
如果水印的内容如果不同，就需要每次修改缓存键，来生成不同的水印图片。
这里我将cacheKey+url作为水印图片的缓存，防止只通过url获取到的缓存图片是同一张。
Future<ui.Codec> _loadImageAsync(
String url,
String? cacheKey,
StreamController<ImageChunkEvent> chunkEvents,
DecoderCallback decode,
BaseCacheManager cacheManager,
int? maxHeight,
int? maxWidth,
Map<String, String>? headers,
Function()? errorListener,
Function() evictImage,
) async {
...
final cacheDefine = "$url/cache=$cacheKey";
Completer<ui.Codec> completer = Completer();
/// if cacheKey is not null,first to get File from cache
if (cacheKey != null) {
FileInfo? cacheFile = await cacheManager.getFileFromCache(cacheDefine,
ignoreMemCache: true);
if (cacheFile != null && cacheFile.validTill.isAfter(DateTime.now())) {
var bytes = await cacheFile.file.readAsBytes();
if (!completer.isCompleted) completer.complete(await decode(bytes));
}
}
...
}主要分成2个步骤：
1.首先将文件流转换成ui.Image类型的数据，是通过any2Image()来实现。
2.将需要绘制的内容绘制到合成图片的文件流，然后返回，这个是通过generateWaterMaskData()实现。
绘制好的内容可以根据新生成的缓存规则，存在缓存中以便后用。
var stream = cacheManager is ImageCacheManager
? cacheManager.getImageFile(url,
maxHeight: maxHeight,
maxWidth: maxWidth,
withProgress: true,
headers: headers)
: cacheManager.getFileStream(url,
withProgress: true, headers: headers);
streamSubscription = stream.listen((result) async {
if (result is DownloadProgress) {
chunkEvents.add(ImageChunkEvent(
cumulativeBytesLoaded: result.downloaded,
expectedTotalBytes: result.totalSize,
));
}
if (result is FileInfo) {
var file = result.file;
var bytes = await file.readAsBytes();
if (settingModel != null) {
var image = await any2Image(Convert2ImageType.DATA, data: bytes);
var waterCacheData =
await generateWaterMaskData(image, settingModel!);
var cacheBytes = waterCacheData!.buffer.asUint8List();
cacheManager.putFile(cacheDefine, cacheBytes,
maxAge: const Duration(days: 7),
fileExtension: fileName?.getMine() ?? 'file');
if (!completer.isCompleted) {
await chunkEvents.close();
completer.complete(await decode(cacheBytes));
}
} else {
if (!completer.isCompleted) {
await chunkEvents.close();
completer.complete(await decode(bytes));
}
}
streamSubscription?.cancel();
}
});首先将文件流转换成ui.Image，这个过程很简单，根据类型来判定传入的数据是文件流还是图片，如果是图片路径则需要先转换成文件流。主要是要注意生成的图片宽高，最好可以按比例缩小一部分，否则可能会影响到水印生成的速度,这里我设置了0.85的缩放系数。
Future<ui.Image> any2Image(Convert2ImageType type,
{String? path,
Uint8List? data,
int? width,
int? height,
double scaleRatio = 0.85}) async {
late Uint8List codecData;
if (type == Convert2ImageType.DATA) {
codecData = data!;
} else {
codecData = File(path!).readAsBytesSync();
}
late ui.Codec codec;
if (width != null && width != 0 && height != null && height != 0) {
codec = await ui.instantiateImageCodec(codecData,
targetWidth: width * scaleRatio ~/ 1,
targetHeight: height * scaleRatio ~/ 1);
} else {
codec = await ui.instantiateImageCodec(codecData);
}
ui.FrameInfo fi =
await codec.getNextFrame().whenComplete(() => codec.dispose());
return fi.image;
}generateWaterMaskData()实现逻辑：
1.考虑到水印不能和图片的整体颜色相近导致看不清，所以这时使用palette_generator库，截取了一部分的图片区域作为样本，取得样本中出现次数最多的色号，然后判断RGB值是偏明还是偏暗，如果偏暗则水印的颜色使用白色，反之亦然。
2.原文件图片作为背景，绘制到一个新的Canvas中。
3.为了水印生成的层次清晰，需要将图片根据宽度分成N等份，然后根据行数进行交错渲染。同时绘制时，会将Canvas进行一定角度的旋转，然后将图片绘制上。结束绘制后Canvas必须要按照原来的角度旋转回来，坐标系会根据根据当前的角度进行累加，导致绘制效果异常。
4.将叠加绘制的Canvas转换成文件流，此时可以选择根据原文件流的尺寸进行部分缩放，否则文件流大小将影响整体的处理速度。最后将图片流占用的内存释放即可。
Future<ByteData?> generateWaterMaskData(
ui.Image originImage, ImageWaterMarkSettingModel settingModel) async {
PaletteGenerator? res = await PaletteGenerator.fromImage(originImage,
region: Rect.fromCenter(
center: Offset((originImage.width / 4), (originImage.height / 4)),
width: (originImage.width / 4),
height: (originImage.height / 4)));
PaletteColor? paletteColor = res.dominantColor;
var i = 0;
if ((paletteColor?.color.red ?? 0) < 128) {
i++;
}
if ((paletteColor?.color.blue ?? 0) < 128) {
i++;
}
if ((paletteColor?.color.green ?? 0) < 128) {
i++;
}
Color renderColor =
i >= 2 ? settingModel.lightColor : settingModel.darkColor;
///首先根据图片宽度分为四等份
settingModel.textWidth = originImage.width / 4;
///根据配置第一项生成水印（为了获取水印渲染高度）
var paragraph = _generateText(settingModel!, renderColor);
///startPosition 水印第一个元素与x、y轴间距
///verticalDistance 水印行y轴间距
double startPosition = 25, verticalDistance = 200;
late int height;
///获取图片高度
height = paragraph.height ~/ 1;
verticalDistance += (height / 600).ceil() * 50;
///计算图片可以配置多少行水印（当配置的角度非0时，由于倾斜的问题，可能会导致边角出现空余，所以角度不为0时，需要多渲染一行）
var heightNumber = settingModel.radians != 0
? (originImage.height - height) ~/ (height + verticalDistance) + 2
: (originImage.height - height) ~/ (height + verticalDistance) + 1;
ImageWaterMarkSettingModel tempSetting = settingModel;
double widthUnit = originImage.width / tempSetting.divided;
double heightUnit = originImage.height / tempSetting.divided;
var scaleFont = (originImage.width / 800) * settingModel.fontSize;
var textWidth = (originImage.width - startPosition) / 4;
var templateParagraph = _generateText(
ImageWaterMarkSettingModel(
fontSize: scaleFont,
textStyle: tempSetting.textStyle,
text: tempSetting.text,
textWidth: textWidth),
renderColor);
///再创建canvas
ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
ui.Canvas canvas = ui.Canvas(pictureRecorder);
ui.Paint paint = ui.Paint();
///原图大小绘制在最底层
canvas.drawImage(originImage, ui.Offset.zero, paint);
///一行默认渲染4个
for (var i = -1; i < 5; i++) {
for (var j = 0; j < heightNumber; j++) {
ImageWaterMarkSettingModel settings = ImageWaterMarkSettingModel();
settings.asset = tempSetting.asset;
settings.divided = tempSetting.divided;
settings.radians = tempSetting.radians;
settings.text = tempSetting.text;
settings.fontSize = scaleFont;
settings.textStyle = tempSetting.textStyle;
settings.textWidth = textWidth;
settings.type = tempSetting.type;
///由于要形成交错效果，所以每行的间距都会出现一段距离
settings.dx = (startPosition +
i * ((originImage.width - startPosition) / 2) +
(j % 2 == 0 ? 0 : 0 - (originImage.width - startPosition) / 2) /
2) /
widthUnit;
settings.dy =
(startPosition + j * (height + verticalDistance)) / heightUnit;
///如果是隔行，且为第一个元素，且角度为0，则该元素不需要渲染
if (j % 2 != 0 && i == 0 && settings.radians == 0) continue;
canvas.rotate(-settings.radians);
// if (waterMarkList[i].runtimeType == ui.Paragraph) {
///canvas以左上角点为原点建立坐标系
//以下出现2次rotate，因为旋转canvas后，整个画布坐标系会一起旋转，如不重置回原来，则下一次旋转的角度将根据此次角度叠加
canvas.drawParagraph(templateParagraph,
Offset(widthUnit * settings.dx, heightUnit * settings.dy));
// }
canvas.rotate(settings.radians);
}
}
///生成与原图尺寸一样的合成图片
ui.Image generateImage = await pictureRecorder
.endRecording()
.toImage(originImage.width * 0.9 ~/ 1, originImage.height * 0.9 ~/ 1);
ByteData? data = await generateImage
.toByteData(format: ui.ImageByteFormat.png)
.whenComplete(() {
originImage.dispose();
generateImage.dispose();
});
return Future.value(data);
}最后该情况还有2点问题暂时没有解决：
1.如何加快整个过程的速度，目前通过断点和日志，可以发现大部分的耗时都是在图片转文件流的处理上，目前的解决的方案：
1.1通过缩小图片的尺寸，获取到更小的文件流大小来达到效果。
1.2通过isolate来分批处理不同逻辑。但是该方法发现最耗时的部分，无法放在子isolate中处 理。
2.另一个问题是，渲染的水印如果是文字，文字的大小似乎与系统的缩放比无关，导致渲染出来的字体大小不太完美。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
