序文
こういうシーンがあります、テキストを多く表示するアプリでは、背景画像をカスタマイズできます、もちろん動的にすることもできますが、このホームページは共有できます、つまり動的背景にテキストを書く必要があります新しい画像を作成して共有します。
達成
準備
画像ライブラリをインポートする必要があります。現在のバージョンは4.0.17です。
ロジックを実装する
静止画像にテキストを追加するのは非常に簡単です。画像ファイルをメモリにデコードし、任意の Image インスタンスに変換し、このインスタンスに対してさらに操作を実行してテキストを描画するだけです。アニメーションはどうでしょうか? 動画というのは実際にはたくさんの画像を重ねてフレームレートに従って表示しているものなので、各フレームの画像を取得して、各フレームの画像上に文字を描画するだけでよいのでしょうか？
実装
気軽にダーツファイルを新規作成してみましょう、まずは試してみましょう
import 'package:image/image.dart';
void main(){
generateGif("hello");
}
void generateGif(String text) async{
final sparkWebp = await decodeWebPFile("webp_video/sparkler.webp");
Image image = Image(width: sparkWebp!.width, height: sparkWebp.height);
for(Image frame in sparkWebp.frames){
final addStringWebp = drawString(frame, text, font: arial24);
image.addFrame(addStringWebp);
}
bool res = await encodeGifFile("test.gif", image);
print(res);
// final addStringWebp = drawString(sparkWebp!, "hello", font: arial24);
//encodePngFile("callTest.png", addStringWebp);
}出来た！左側は元の画像 webp、右側はエクスポートされた gif、ファイルはプロジェクトのルート ディレクトリに生成されます
注：画像はインターネットから取得したものです。侵害がある場合は、削除するために連絡してください。
実装の詳細
ここでは、drawString() メソッドを使用してテキストを書き込みます。受信パラメータから、BitmapFont とビットマップ フォント (fnt) を渡す必要があることがわかります。ビットマップ フォントのみがサポートされているため、英語と現在特殊なフォントも描画可能です。
ここでの x と y は、指定したテキストの位置です。指定しない場合は、デフォルトで中央に配置されます。色やその他の効果を指定することもできます。1 つずつリストしません。自分で探索できます。 ！
Image drawString(Image image, String string,
{required BitmapFont font,
int? x,
int? y,
Color? color,
bool rightJustify = false,
bool wrap = false,
Image? mask,
Channel maskChannel = Channel.luminance})