Flutter裁剪圖片

最近在學習中需要用到裁剪圖片,記錄一下解決方法

思路:

使用canvas的drawImageRect()方法,對Image進行裁剪,這里的Image需要 'dart:ui' 庫中的Image。

1. canvas的drawImageRect()方法


drawImageRect(Image image, Rect src, Rect dst, Paint paint) → void

①第一個參數是'dart:ui' 庫中的Image。

②第二個參數為你需要截取的矩形Rect,舉個栗子:截取一張圖片,原圖的寬高分別為w和h,

將第二個參數設置為:


Rect.fromLTRB(0, 0, w/2, h/2)

意思就是從原圖片中截取一個矩形,矩形的坐標從(0.0)到(w/2, h/2)。

這里的是fromLTWH意思是指定left,top,right,bottom坐標,通過指定四個點來獲取矩形

③第三個為目標矩形Rect,即你想要在canvas上繪制的區域,

舉個栗子:接著上面所講的,將第三個參數設置為


Rect.fromLTWH(0, 0, 100, 100), paint);

意思就是將上面截取的矩形,在canvas的(0,0)坐標開始繪制,繪制的寬和高為100,

這里的是fromLTWH意思是指定left和top坐標,并設置寬高來獲取矩形

④第四個參數為畫筆。

2.'dart:ui' 庫中的Image

這里我們要引入'dart:ui' 取別名為ui,避免庫里的方法與'package:flutter/material.dart'中的方法重名沖突


import 'dart:ui' as ui;

從我們平常用的圖片去獲取ui庫下的Image的方法如下:

將圖片轉化為流,并添加監聽,在圖片流加載完成之后獲取到ui.Image


Future<ui.Image> imageLoader() {

    ImageStream imageStream = NetworkImage(

            'https://avatars0.githubusercontent.com/u/45789654?s=460&v=4')

        .resolve(ImageConfiguration.empty);

    Completer<ui.Image> imageCompleter = Completer<ui.Image>();

    void imageListener(ImageInfo info, bool synchronousCall) {

      ui.Image image = info.image;

      imageCompleter.complete(image);

      imageStream.removeListener(ImageStreamListener(imageListener));

    }

    imageStream.addListener(ImageStreamListener(imageListener));

    return imageCompleter.future;

  }


clip() async {

    ui.Image _image;

    imageLoader().then((image) => _image = image).whenComplete(() {

      clipper = ImageClipper(_image,left: 0,top: 0,right: 0.5,bottom: 0.5);

      setState(() {});

    });

  }

通過clip()方法得到ImageClipper對象,并且setState通知界面更新Container的內容,


Container(color: Colors.green,child: CustomPaint(painter: clipper,size: Size(50, 50),)),

ImageClipper中的核心方法


@override

  void paint(Canvas canvas, Size size) {

    Paint paint = Paint();

    canvas.drawImageRect(_image, Rect.fromLTRB(_image.width*left, _image.height*top, _image.width*right, _image.height*bottom),

    Rect.fromLTWH(0, 0, size.width,  size.height), paint);

  }

詳細代碼放在我的github上,新手,寫得不好勿噴

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。