現在、フラッターキャンバスに画像を描画し、画像上に長方形を描画して特定のデータをカバーしようとしています。長方形はうまく描画されているが、画像が後ろに描画されていないという問題が発生しています。まったく描かれていないように見えます。
イメージをバイトから Dart UI Image オブジェクトにロードしています。画像が読み込まれたら、PictureRecorder を作成して Canvas オブジェクトに渡します。次に、最初に画像オブジェクトを描画し、続いてその上に四角形を描画しようとします。完全なコードは次のとおりです。
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:common/ocr/scraped_card_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class ObfuscatedCardRenderer {
ui.Image _backgroundImage;
///
///
///
Future<ByteData> renderImage(
Uint8List imageBytes, List<ScrapedCardField> fields) async {
await _loadImageBackground(imageBytes);
var obfuscatedImage = await _obfuscateImage(fields);
var byteD =
await obfuscatedImage.toByteData(format: ui.ImageByteFormat.png);
return byteD;
}
///
///
///
Future<ui.Image> _obfuscateImage(List<ScrapedCardField> fields) async {
ui.PictureRecorder recorder = ui.PictureRecorder();
ui.Canvas c = ui.Canvas(recorder);
var paint = ui.Paint();
c.drawImage(_backgroundImage, ui.Offset(0.0, 0.0), new Paint());
for (ScrapedCardField field in fields) {
paint.color = Colors.white;
c.drawRect(field.boundingBox, paint);
}
var picture = recorder.endRecording();
return picture.toImage(_backgroundImage.width, _backgroundImage.height);
}
///
///
///
Future<void> _loadImageBackground(Uint8List imageBytes) async {
if (imageBytes != null) {
_backgroundImage = await _getImageFromBytes(imageBytes);
} else {
return null;
}
}
///
///
///
Future<ui.Image> _getImageFromBytes(Uint8List imageBytes) async {
var completer = Completer<ui.Image>();
ui.decodeImageFromList(imageBytes, (image) {
completer.complete(image);
});
return completer.future;
}
}
結果は次のとおりです。
ご覧のとおり、四角形は完全にきれいに描画されていますが、背景の画像は表示されていません。画像を描画するために他にすべきことはありますか、それとも別の方法がありますか?
ありがとう!