es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de Flutter web PaintImage() en el navegador móvil.

Estoy tratando de obtener una imagen pintada en Canvas. Funciona en web y teléfono. Pero cuando lo pruebo en el navegador móvil, PaintImage() o canvas.drawImage() no funcionan y arrojan un error. Cuando elimino PaintImage(), funciona y obtengo mi imagen en el canvas. ¿Alguien ha tenido el mismo problema? ¿Alguna idea u otra función de dibujo de imágenes para canvas? No puedo ver el error desde la depuración porque ya sabes que el depurador web de Flutter es deficiente en informar. He estado buscando una solución en los últimos días…

Future<ui.image> getCanvasImage() async {
    Size imageSize = const Size(1200, 630);
    final recorder = ui.PictureRecorder();
    final canvas = Canvas(recorder, Rect.fromPoints(const Offset(0.0, 0.0), Offset(imageSize.width, imageSize.height)));

    canvas.drawRect(Rect.fromLTWH(0.0, 0.0, imageSize.width, imageSize.height), Paint()
    ..shader = ui.Gradient.linear(
        const Offset(0, 0), Offset(imageSize.width, imageSize.height), [
        const Color.fromRGBO(23, 74, 151, 1),
        const Color.fromRGBO(90, 168, 200, 1),
      ]));

    like = await loadUiImage('lib/assets/like.png');
    var rect = Rect.fromLTWH(
      100,100,100,100,
    );

    //canvas.drawImageRect(like, maskSourceRect, rect, paint);
    //canvas.drawImage(like, Offset.zero, Paint());
    paintImage(canvas: canvas, rect: rect, image: like, debugImageLabel: 'lake');

    final picture = recorder.endRecording();
    final img = picture.toImage(imageSize.width.toInt(), imageSize.height.toInt());
    return img;
}

dart
Future<ui.image> loadUiImage(String imageAssetPath) async {
final ByteData data = await rootBundle.load(imageAssetPath);
final Completer<ui.image> completer = Completer();
ui.decodeImageFromList(Uint8List.view(data.buffer), (ui.Image img) {
return completer.complete(img);
});
return completer.future;
}
</ui.image></ui.image></ui.image>

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema está con la función PaintImage() que no funciona en los navegadores móviles. Has intentado utilizar canvas.drawImage() y tampoco funciona. Una solución alternativa podría ser utilizar canvas.drawImageRect(), que recibe como parámetros un rectángulo de origen y un rectángulo de destino. Otra alternativa podría ser utilizar el parámetro paint en canvas.drawImage() y especificar el modo de mezcla y la calidad del filtro.

    En cuanto a la pobre generación de informes en el depurador web de Flutter, puede ser útil utilizar declaraciones print() en todo el código para depurar y ver dónde puede estar ocurriendo el problema. Además, la comunidad de Flutter puede tener algunas sugerencias sobre cómo mejorar la depuración en Flutter web.

Comments are closed.