Flutter开发之 RepaintBoundary截图不清晰及插件image_gallery_saver保存图片出现水波纹问题

目录

截图不清晰

保存图片有水波纹

先来个前言记录前面的问题。

前言：

        做一个制作壁纸的项目，该项目需要从网络搜索图片展示到界面，我是从Pexels搜索到的图片，网站：https://www.pexels.com/zh-cn/，网站挺好用的，就是感觉服务器很容易崩。一开始遇到的问题是小尺寸的暂时图片没问题，点开在全屏展示的话图片就会糊。原因是我用的图片大小是medium，不管是小窗口还是全屏，我用的大小都是这个，全屏能清晰才有鬼。下面是Pexels返回的图片资源的Json数据结构：

{
  "id": 2014422,
  "width": 3024,
  "height": 3024,
  "url": "https://www.pexels.com/photo/brown-rocks-during-golden-hour-2014422/",
  "photographer": "Joey Farina",
  "photographer_url": "https://www.pexels.com/@joey",
  "photographer_id": 680589,
  "avg_color": "#978E82",
  "src": {
    "original": "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg",
    "large2x": "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
    "large": "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
    "medium": "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?auto=compress&cs=tinysrgb&h=350",
    "small": "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?auto=compress&cs=tinysrgb&h=130",
    "portrait": "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
    "landscape": "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
    "tiny": "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
  },
  "liked": false,
  "alt": "Brown Rocks During Golden Hour"
}

知识面太浅了，都没想人家为什么要给你large、large2x的图片资源，所以这里把medium换成large2x就清晰了。

截图不清晰

接下来是截图不清晰的问题，我使用的是RepaintBoundary截图，代码如下：

static saveWidgetToImage({required GlobalKey globalKey}) async {
    AppUtils.showLoading();
    final RenderRepaintBoundary boundary =
        globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary;
//截图不清晰注意看pixelRatio这个参数
    ui.Image image = await boundary.toImage(pixelRatio: ui.window.devicePixelRatio);
    ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    AppUtils.dismissLoading();
    if(byteData != null){
      try{
//水波纹问题看quality
        var res = await ImageGallerySaver.saveImage(byteData.buffer.asUint8List(),quality: 160);
        debugPrint(byteData.toString());
        if(res['isSuccess'])
          AppUtils.showToast(message: '保存成功');
        else{
          AppUtils.showToast(message: '保存失败，检查权限啥的提醒');
        }
      } catch(e) {
        debugPrint(e.toString());
      }
    }
  }

注意看pixelRatio这个参数，ui.window.devicePixelRatio表示设备分辨率，是一个double类型，我这里输出的是2.0，不仔细看看不出来不清晰，放大就会发现不太清晰，因为是用作壁纸的，我改为6了。

屏幕显示的部分图片：

pixelRatio1-6的图，好像没有3的：

 

 

 单看出来1那张糊的明显，其他的都还行，但是pixelRatio=2放大也有一点糊。

保存图片有水波纹

这个问题是用image_gallery_saver保存图片的时候出现的，原因是

var res = await ImageGallerySaver.saveImage(byteData.buffer.asUint8List(),quality: 160);

quality这个参数，它默认值是80，底层会➗100，这个是压缩质量的意思，底层调用的是下面这个方法，0.0最低质量，1.0最高质量，就是就算我写的160，最后也就是1.0，把这个调高了就没有水波纹了。