添加水印，兩種實現(xiàn)思路，一種是將圖片與水印解碼，然后混編再編碼，另一種是通過Widget的方式合成。

在這里采用的實現(xiàn)思路是使用層疊布局Stack加載圖片以及水印部分，水印部分可能是一個現(xiàn)成的圖片也可能是一個文字等其他樣式的組件，然后將這個Stack使用RepaintBoundary組件包裹起來，然后通過Widget生成圖片的功能從而達(dá)到實現(xiàn)保存圖片為水印效果。

如圖下圖所示，加載的本地資源目錄下的一張圖片，點擊右上角的對勾然后將圖片與右下角的文字合面一起生成一張新圖片保存在手機目錄存儲中。

然后在Android Studio控制臺中輸入的日志如下：

flutter:?保存的圖片地址為/Users/androidlongs/Library/Developer/CoreSimulator/Devices/DD736D17-AB7D-47CA-81C5-2D5283944F6B/data/Containers/Data/Application/AE08A4F2-9DFE-4A23-80A7-7BEB153A30B0/Documents/723.png

因為這里使用的是 ios 模擬器，所以這里保存在了模擬器使用的內(nèi)存空間中，打開保存的路徑查看

從保存到的圖片中可以看到水印已經(jīng)添加上去了

在這里將顯示將上述所有顯示與操作的UI功能封裝在一個StatefulWidget，在這里可以使用一種新的方式打開這個頁面，當(dāng)顯示的圖片沒有填充屏幕時，四周會是暗色半透明效果，也就是打開的Widet頁面背景透明，代碼如下：

///背景透明的跳轉(zhuǎn)Navigator.of(context) .push(PageRouteBuilder( opaque: false, pageBuilder: (context, animation, secondaryAnimation) { return ImageWatermarkPage(); })) .then((value) { if(value!=null){ /// print("保存的圖片地址為$value");??????}

對于頁面ImageWatermarkPage就是實現(xiàn)了顯示圖片以及水印展示功能，代碼如下：

class ImageWatermarkPage extends StatefulWidget { @override _RawImageState createState() => _RawImageState();}class _RawImageState extends State<ImageWatermarkPage> { ///生成圖像的層疊布局Stack的主鍵 GlobalKey _globalKey = GlobalKey(); ///正在保存中 bool isSaving = false; @override Widget build(BuildContext context) { return Scaffold( ///頁面背景為半透明的灰色 backgroundColor: Color(0x50cdcdcd), ///填充布局 body:Stack( ///約束未設(shè)置位置的子Widget劇中對齊 alignment: Alignment.center, children: [ ///生成目標(biāo)圖像的圖片與水印部分 buildWaterImageWidget(), ///保存水印圖片的操作部分 buildSaveWidget(), ///取消操作的部分 buildCancleWidget(), ///正在保存圖像時顯示的進(jìn)度 buildLoadingWidget(), ], ), ); } ... 省略}

生成目標(biāo)圖像的圖片與水印部分封裝在buildWaterImageWidget方法中，在這里就是通過RepaintBoundary組件將圖片與水印部分通過層疊布局結(jié)合在一起的UI構(gòu)建，代碼如下：

///生成目標(biāo)圖像的圖片與水印部分 Widget buildWaterImageWidget() { ///可以為其子元素創(chuàng)建一個單獨的子樹 ///相當(dāng)于總樹Widgets上的一個小分叉樹枝 return RepaintBoundary( key: _globalKey, ///用于生成圖像的Widget child: Container( ///全屏顯示 width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, child: Stack( children: [ Image.asset( "assets/images/2.0x/s03.jpeg", fit: BoxFit.fill, width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, ), ///右下角的水印部分 Positioned( bottom: 20,right: 20, child: Container( padding: EdgeInsets.only(left: 8,right: 8,top: 2,bottom: 2), decoration: BoxDecoration(border: Border.all( color: Colors.red, width: 1.0 )), child: Text("這里是水印",style: TextStyle(fontSize: 14,color: Colors.white),), ), ) ], ), ), );??}

對于方法buildSaveWidget就是封裝了構(gòu)建保存對勾以及功能的方法，代碼如下

///保存水印圖片的操作部分 Widget buildSaveWidget() { ///小對勾按鈕顯示在右上角 return Positioned( top: 40, right: 20, child: IconButton( icon: Icon(Icons.check_circle,color: Colors.blue,size: 33,), onPressed: () async { ///更新頁面顯示 setState(() { isSaving = true; }); ///通過globalkey將Widget保存為ui.Image ui.Image _image = await ImageLoaderUtils.imageLoader .getImageFromWidget(_globalKey); ///異步將這張圖片保存在手機內(nèi)部存儲目錄下 String localImagePath = await ImageUtils.imageUtils .saveImageByUIImage(_image, isEncode: false); ///保存完畢后關(guān)閉當(dāng)前頁面并將保存的圖片路徑返回到上一個頁面 Navigator.of(context).pop(localImagePath); }, ), );??}取消操作的部分就是頁面左上角的關(guān)閉按鈕，功能比較簡單在buildCancleWidget方法中構(gòu)建，代碼如下： ///取消操作的部分 Widget buildCancleWidget() { return Positioned( top: 40, left: 20, child: IconButton( icon: Icon(Icons.clear,color: Colors.red,size: 33,), onPressed: () { Navigator.of(context).pop(); }, ), ); }

buildLoadingWidget方法中封裝了當(dāng)用戶點擊保存時，更新 isSaving的值為true，然后在頁面上顯示一個小圓圈，以給用戶一個正在操作中的提示反饋，代碼如下：

///正在保存圖像時顯示的進(jìn)度 ///一個小圓圈 Widget buildLoadingWidget() { return isSaving?CircularProgressIndicator():Container(); }

在這里將Widget保存為圖像的方法ImageLoaderUtils的getImageFromWidget方法以及將Image保存到手機存儲中的方法saveImageByUIImage 會在下一篇文章中分享。

總結(jié)

以上是生活随笔為你收集整理的ios 从assets加载图片_Flutter图片添加水印功能，Flutter保存Widget为图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。