flutter canvas 如何獲取clip後的圖片

原文地址

Step.1 Canvas轉換爲圖片

首先，你要了解flutter如何將canvas轉換成圖片，這裏有一個很是好的例子分享給你們flutter_canvas_to_image 簡單講解一下思路：

1.首先建立一個 ui.PictureRecorder（記錄儀）, 而後做爲載體建立一個canvas對象

// 建立一個記錄儀
final recorder = new ui.PictureRecorder();
final canvas = new Canvas(
    recorder,
    new Rect.fromPoints(
        new Offset(0.0, 0.0), new Offset(200.0, 200.0)));
複製代碼

2.在canvas上進行繪製

final stroke = new Paint()
  ..color = Colors.grey
  ..style = PaintingStyle.stroke;

canvas.drawRect(
    new Rect.fromLTWH(0.0, 0.0, 200.0, 200.0), stroke);

final paint = new Paint()
  ..color = color
  ..style = PaintingStyle.fill;

canvas.drawCircle(
    new Offset(
      widget.rd.nextDouble() * 200.0,
      widget.rd.nextDouble() * 200.0,
    ),
    20.0,
    paint);
複製代碼

3. 轉換和顯示

// 關閉記錄儀
final picture = recorder.endRecording();
final img = picture.toImage(200, 200);
final pngBytes = await img.toByteData(format: new ui.EncodingFormat.png());
// 顯示圖片
new Image.memory(new Uint8List.view(imgBytes.buffer));
複製代碼

Step.2 Canvas截取

當咱們懂得如何將canvas轉爲圖片以後，咱們簡單看下canvas clip的代碼（這並非本文主要講述的內容，因此不作詳細說明），咱們以canvas.clipPath截取圖片爲例

// 繪製一個三角形的path
Path _path = Path()
      ..moveTo(100, 50)
      ..lineTo(50, 150)
      ..lineTo(150, 150)
      ..lineTo(100, 50);

canvas.clipPath(_path);

canvasClip.drawImageRect(
      _image, // ui.Image
      Rect.fromLTWH(0, 0, _image.width.toDouble(), _image.height.toDouble()),, 
      Rect.fromLTWH(0, 0, 200, 200), // 畫布Rect
      Paint()
    );
複製代碼

Step.3 獲取截取以後的圖形

咱們已經將圖片截取了，這個時候獲取的圖片大小是200*200的，可是咱們只想要那個三角形怎麼辦那？思路以下:

1. 獲取path圍成的矩形
2. 將這個矩形移到畫布的左上角
3. 轉成目標大小的圖片

思路有了，咱們看實際解決辦法，首先針對第一點，flutter Path 爲咱們提供了一個現成的方法 getBounds(), 看下官網的描述

getBounds() → Rect
Computes the bounding rectangle for this path. 
複製代碼

而後看下第二點，咱們能夠將以前生成的圖片經過位移畫在一個新的canvas的左上角，第三步在Step.1 已經充分get了，看下代碼：

// 獲取Path圍成的矩形
Rect _bounds = _path.getBounds();
// 上一步生成的圖片
ui.Image img = await picture.toImage(200, 200);
// 新建一個新的記錄儀和canvas
final recorder2 = ui.PictureRecorder();
final canvasClip = Canvas(recorder2, Rect.fromLTWH(0, 0, size.width, size.height));

canvasClip.drawImageRect(
      img,
      _bound, // _bound 中已經包含左上角的offset，能夠直接拿過來用
      Rect.fromLTWH(0, 0, _bound.width, _bound.height),
      Paint()
 );
// 中止錄製 生成image
final picture2 = recorder2.endRecording();
ui.Image img2 = await picture2.toImage(size.width.toInt(), size.height.toInt());

final pngBytes = await img2.toByteData(format: ui.ImageByteFormat.png);
複製代碼

看起來沒什麼變化？咱們能夠打印下輸出

very nice，大佬們若是有更好的方法麻煩告訴下，很是感謝

Step.4 獻上完整代碼

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:myapp/utils/image.dart';
import 'package:flutter/material.dart';

void main() => runApp(App());

const kCanvasSize = 200.0;

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ImageGenerator(),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ImageGenerator extends StatefulWidget {
  @override
  _ImageGeneratorState createState() => _ImageGeneratorState();
}

class _ImageGeneratorState extends State<ImageGenerator> {
  ByteData imgBytes;
  ui.Image _image;

  @override
  void initState() {
    super.initState();
    loadImage('assets/images/face.jpg').then((image) {
      setState(() {
        _image = image;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: RaisedButton(
                child: Text('Generate image'), onPressed: generateImage),
          ),
          imgBytes != null
              ? Container(
                  child: Image.memory(
                  Uint8List.view(imgBytes.buffer),
                  width: kCanvasSize,
                  height: kCanvasSize,
                ))
              : Container()
        ],
      ),
    );
  }

  void generateImage() async {
    final recorder = ui.PictureRecorder();
    final canvas = Canvas(recorder,
        Rect.fromPoints(Offset(0.0, 0.0), Offset(kCanvasSize, kCanvasSize)));

    final stroke = new Paint()
      ..color = Colors.grey
      ..style = PaintingStyle.stroke;

    canvas.drawRect(Rect.fromLTWH(0.0, 0.0, kCanvasSize, kCanvasSize), stroke);

    Path _path = Path()
      ..moveTo(100, 50)
      ..lineTo(50, 150)
      ..lineTo(150, 150)
      ..lineTo(100, 50);

    canvas.clipPath(_path);
    Rect _bound = _path.getBounds();

    canvas.drawImageRect(
        _image,
        Rect.fromLTWH(0, 0, _image.width.toDouble(), _image.height.toDouble()),
        Rect.fromLTWH(0, 0, 200, 200),
        Paint());

    final picture = recorder.endRecording();
    ui.Image img = await picture.toImage(200, 200);

    print('img的尺寸: $img');

    final recorder2 = ui.PictureRecorder();
    final canvasClip =
        Canvas(recorder2, Rect.fromLTWH(0, 0, _bound.width, _bound.height));

    canvasClip.drawImageRect(
        img, _bound, Rect.fromLTWH(0, 0, _bound.width, _bound.height), Paint());

    final picture2 = recorder2.endRecording();
    ui.Image img2 =
        await picture2.toImage(_bound.width.toInt(), _bound.height.toInt());

    print('img2的尺寸: $img2');

    final pngBytes = await img2.toByteData(format: ui.ImageByteFormat.png);

    setState(() {
      imgBytes = pngBytes;
    });
  }
}
複製代碼