-
-
Notifications
You must be signed in to change notification settings - Fork 245
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I want to use custom font size in Flutter Image.drawString #615
Comments
Font support is very limited, just fixed size bitmap fonts (as you've discovered). |
Please explain a brief more. if I want custom font size while processing the image then what I need to do? |
Yes, there is no variable sized font rendering. |
Hello! |
I found a workaround to use custom font but it only works with flutter. here is how you can do it:
import 'package:flutter/material.dart';
import 'dart:ui';
import 'dart:typed_data';
TextSpan textSpan = TextSpan(
text: 'Hello World',
style: TextStyle(
fontFamily: 'YourFont',
fontSize: 20,
color: Colors.black,
),
);
TextPainter textPainter = TextPainter(
text: textSpan,
textDirection: TextDirection.ltr,
);
textPainter.layout();
PictureRecorder recorder = PictureRecorder();
Canvas canvas = Canvas(recorder);
textPainter.paint(canvas, Offset(0, 0));
Picture picture = recorder.endRecording();
final image = await picture.toImage(textPainter.width.toInt(), textPainter.height.toInt());
ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
Uint8List pngBytes = byteData!.buffer.asUint8List();
final textimg = img.decodeImage(pngBytes)!; now textimg is an Image object from dart image lib, its only text so you can add it to another image or save it as a file. to add it to another image you can do this: composite(otherimage, textimg, dstX: 0, dstY: 0); the whole code should look like this: import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;
import 'dart:ui';
import 'dart:typed_data';
void main() async {
TextSpan textSpan = TextSpan(
text: 'Hello World',
style: TextStyle(
fontFamily: 'YourFont',
fontSize: 20,
color: Colors.black,
),
);
TextPainter textPainter = TextPainter(
text: textSpan,
textDirection: TextDirection.ltr,
);
textPainter.layout();
PictureRecorder recorder = PictureRecorder();
Canvas canvas = Canvas(recorder);
textPainter.paint(canvas, Offset(0, 0));
Picture picture = recorder.endRecording();
final image = await picture.toImage(
textPainter.width.toInt(), textPainter.height.toInt());
ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
Uint8List pngBytes = byteData!.buffer.asUint8List();
final textimg = img.decodeImage(pngBytes)!;
Image otherimage = readPng('path/to/your/image.png');
composite(otherimage, textimg, dstX: 0, dstY: 0);
} its only a workaround but it works, i hope it helps you. |
@brendan-duncan can we implement this in the library, it will solve a lot of text rendering problems |
I can't add the Flutter dependencies to the image package. That could be done in a separate package, and it would be awesome if it were. I won't able to do that myself, it opens up too many maintenance issues and I already have more projects than time. I somewhat regret adding any font / text rendering to this library at all, it's one of the main things complained about, and text rendering is a hugely complicated issue, especially with non-ASCII. But I appreciate the desire to have it, I wish I could offer more. |
i made that as a separate package, so it will be easier to maintain and update, this is the link to the package: https://pub.dev/packages/draw_text |
This is about Flutter, Dart, Image, specifically drawString function.
First of all, what I am trying to do is watermark the picture taken with the text (product name). I mean not just placing text over the image but actually merge it with picture so that the user can submit the picture and share it while sharing the product.
To do so. I found the right function drawString(), but the problem is it only supports arial48, arial24 and arial14 font sizes. Since I have to write the product name in custom fontsize which I'm extracting by calculating the width and height of the original image. Is there any one who tried this before or any who can make it possible. Anyone who knows?
I've tried this.
` import 'package:image/image.dart' as img;
img.drawString(originalImage,'$myProductName($pictureTag)', x: value, y: value, color: img.ColorFloat32.rgb(255,255,255), font: img.arial48, );
`
But I need to use custom font size instead of these predefined sizes.
I'm using flutter: 3.19.0 version.
and
image: ^4.1.7
The text was updated successfully, but these errors were encountered: