Flutter如何加载base64的图片

最新推荐文章于 2024-07-13 21:25:54 发布
最新推荐文章于 2024-07-13 21:25:54 发布
阅读量3.7k 收藏 1
点赞数
分类专栏： Flutter
原文链接：https://www.jianshu.com/p/bc92a899d9c6
版权

Flutter中可能需要加载如下的base64图片：


"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAjCAIAAACmdes6AAACP0lEQVR4Xu2W0U3EQAxETxSA+OMnFdAL30AV1EUproB2SGJwhpldZ7MJEBDSfCT22Ot3vj3dxV5f/pguGvrt+kf6Mg2P9xrs01mQbKY6BOxESK79YKdDcu0BOwype4JEfT1PjWRd6zo7kmsTWCvSzfXzKAo+PdyFxiPxVW2X26ui0KlZ9DSC7UJyIZJmyaaDqnLPKlgTkvPUkGweN7akWTd4Kpk1lHgCJqFaR3KSHMnmM3Ikf0jGDSUeJKmt63gkpcJgMm4o8SiDgq0gBcYmJKSi12TcRo9SeTDiGVIweEGO5DZC0qWNg+rnSgokdPqzCgv9tYpEaxmfa41CHsddEY9VxtU+dBZFsFBTGRK9YqTW3T4jUU+TLxV1QE/xiCjRqqVcQyY8HtGgS89uQUJ5bTGoo+txfISGiqMnSCE8bKj8psfEtfLw1Ob+biSDFRXPTpCiyTBvTGvJU0yZIsXcVNaIhJvBS4V4OZLBr2Jt7iQ1leOLz03C7hHURvaBhBG9VKvjuie31eLv5fiiPAme9kqQIk5fvGIrvUtkS2aYyjVUlC4H8RymeAZRrd6l8OjcRFg8bip3hyZIioSi26LZQ5BctfhSHj7NoRKkGDeaIN7w+b/ffiTsr6mpPEyaQ21CIiFeICVUhERtMYjZeFjuUm0glyLhZ+/SDrofxUM/AqMNq9zpDxhf/NgxCvq0tZxGqWW10LMa9PhPIpEIrw/J9Ec8sbZoZ3mI8FS1uJ0Wyda25AYNmiIl1hbtqSV1I70B+dAU/4dAw64AAAAASUVORK5C"

但是该如何加载这样的图片呢？ 需要使用以下方式：


Image.memory(

  base64.decode(

    <所得到的如上述所示的base64图片字符串>.split(',')[1]),

    height:30,    //设置高度

    width:70,    //设置宽度

    fit: BoxFit.fill,    //填充

    gaplessPlayback:true, //防止重绘

  )

 

 

Me_Ordinary
关注
专栏目录
Flutter开发： 将本地相册图片转换成Base64字符串
软贱开发攻城狮
12-10 3092
前言 在Flutter开发中，关于图片上传和展示也是常用必用的操作，尤其是在设置APP用户的头像信息，以及上传背景图的操作。关于Flutter开发中图片的上传和展示也是比较常用的操作，也有对应的组件和插件，但是关于一些引申的需求操作，常规的操作是满足不了需要的，那么本文就来分享一下在实际业务需求中常用的需求：把从相册选中的图片转换成Base64之后再显示，或者展示获取到的Base64的图片。接下来就来分享一下关于相关的操作方法，方便查阅使用。 需求描述 读取到本地相册图片路径后，然后通过路径将
Flutter 加载Https网络图片
WangQingLei0307的博客
08-26 1388
在开发过程中，我们经常会加载网络图片，Flutter 其实已经为我们提供了网络图片的加载方法，我们只需要使用即可。 例如： Container( //展示动态图片 margin: EdgeInsets.fromLTRB(0, 10, 50, 10), width: 80, height: 80, decoration: BoxDecoration( image: Decora
flutter 显示base64 图片
weixin_30685029的博客
05-09 5241
后台返回base64 为了本地显示需要转换成Uint8List 1.导入包 import 'dart:convert';2.后台返回base64 格式不被识别需要切分 //'"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAuCAYAAACvdRK....' 错误格式格式 CaptchaCode = CaptchaCode.s...
什么是图片base64，用在网页中没网络的时候也能加载？
最新发布
m0_63331248的博客
07-13 323
图片的Base64编码是一种将图片文件转换成ASCII字符的方法。这种方式允许将图片数据直接嵌入到网页的HTML或CSS代码中，而无需通过外部链接来引用图片。当网页使用Base64编码的图片时，即使在没有网络连接的情况下，只要网页已经加载了这些图片的Base64编码数据，浏览器就可以解析并显示这些图片。这是因为图片数据已经作为网页的一部分被下载和存储在用户的设备上，不需要从服务器上额外下载。总的来说，Base64编码适用于小图片或图标，可以提高页面的加载速度并减少HTTP请求，但在使用时需要权衡其优缺点。
Flutter Image 图片加载
代码小疯子
07-02 4441
Image 简介 Android ios 原生中使用 ImageView 来加载显示图片 在flutter 中通过Image来加载并显示图片 1 Image 加载网络图片 var imageUrl = "http://pic31.nipic.com/20130711/8952533_164845225000_2.jpg"; Image( image: NetworkImage( ...
Flutter base64与图片
lishuangzhi的博客
05-05 872
什么是Base64 廖雪峰的博客 图片转base64 ImagePicker.pickImage(source: ImageSource.gallery).then((value)async{ List bytes =await value.readAsBytes(); String bs64 = base64Encode(bytes); String bs64Image ="data:image/png;base64,"+bs64; print(bs64Image); }); base.
flutter 图片转base64_如何使用Flutter实现多种布局方式，无限轮播，Android和IOS双端适配？
weixin_39806779的博客
11-30 388
前言大部分app都有轮播图，一般是展示一些新闻公告通知等图片，在flutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配，github：flutter_swiper使用：加载图片一般是从本地代码中或者使用网络图片，那么，首先将资源添加到项目的 pubspec.yaml 文件中（更多细节请参阅Assets and images）：flutter: asse...
Flutter 图片加载
QiwooMobile的博客
10-30 836
前言 本篇文章你将获得？ 1、Flutter 图片加载方式 2、Flutter 图片加载源码实现流程 3、Flutter 图片加载优化点有什么 Flutter Image 在 Flutter 中 Image 是展示图片的 widget ，用于从 ImageProvider 获取图像。Image 支持的图片格式有 JPEG、WebP、GIF、animated WebP/GIF 、PNG 、BMP、 ...
flutter自定义实现图片的加载
qq_52084136的博客
07-17 788
在flutter中，默认的图片加载是缓存在内存中的，那么意味着我们结束应用程序后再次进入程序需要再次通过网络请求去加载一些图片资源，在用户的网络情况不是特别好的情况下就会造成不太良好的体验，网上也有一些技术大牛发布了一些加载库，确实厉害。当然别人能实现的我们自己也能实现，一直用别人的虽然节省了时间但不如自己亲自实现香，特别是这种小东西（比较大型的诸如Bloc这些状态管理框架还是随着自己对源码的掌握程度慢慢来，开发时间成本较高，肯定先用大牛的了。），如果自己实现或许能够提升那么一丢丢自己对flutter源码的
flutter_base_demo:flutter组件学习
04-13
3. **Image**: 可以加载本地或网络图片，支持调整大小、裁剪、圆形化等操作。 4. **ListView** 和 **GridView**: 用于展示可滚动的列表和网格视图，常用于展示大量数据。它们可以配置不同的滑动方向、间距和项布局...
flutter Base64 图片解密
qq_36632604的博客
08-03 1527
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB2ElEQVR4nO1W0XGDMAxV7rKAO4JX8ApklXaFrMAKjFBW8AjxCNEI9QipJBDI1E1CQ3r96MsRDJb99GRheQ8zLvAc7PhPiS7vpzMkROj7HrzzEJowWWJK4MPwnGIq+mo2Ajfc2sOBBeyY6HI6f8Bb20HOSCMQ5.
Flutter 处理base64转图片
m0_55913607的博客
03-05 858
Flutter 处理base64转图片
关于flutter for web 图片压缩上传base64的处理
WC270607563的专栏
12-08 1524
原生app转换成flutter for web后，发现用image库的decodeimage函数在网页上慢到无法忍受，通过查资料了解用网页的canvas直接加载处理。以下是图片选择/拍照，压缩后转到base64的主要代码，希望能帮到有同样困惑的小伙伴们。 import 'package:image_picker/image_picker.dart'; import 'package:image_picker_for_web/image_picker_for_web.dart'; ///摄像...
flutter base64编解码
xinhengqq的博客
05-16 295
flutter base64编解码
网络层协议data:image/gif；base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==
m0_71931851的博客
07-13 796
网络层协议
Flutter学习之将本地相册图片转换成Base64字符串
Pillar的专栏
04-16 8304
1、问题描述：读取到本地相册图片路径后，如何通过路径将图片转换成Base64字符串？ 2、解决方法： /* * 通过图片路径将图片转换成Base64字符串 */ static Future image2Base64(String path) async { File file = new File(path); Lis...
Python base64转图片
时越的博客
04-04 5370
import base64 # s='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAABYCAYAAAAp6qMtAAAgAElEQVR4Xu1dB3hUVdo+5947JTPJpBdCKklIgCT0jlKluwoCsq5dFizr2lbFCoptdVkLu6uoK4ouKCIoIiIoICIiVST0hJJG2iSZ1Jm595zzP98594YBIY0Q9H+c5+EJhJk7d+47X3u/9/suRu34YIxh/e0wxpheyFvDsTD
Flutter图片加载原理与缓存，2024年最新android游戏开发工具
2401_84006757的博客
04-09 391
headers?});// 接收图片数据response,));},// 对图片数据进行解码可以看到_loadAsync下载逻辑比较简单：通过HttpClient从网上下载图片，另外下载请求会设置一些自定义的header，开发者可以通过的headers命名参数来传递。
data:image/png；base64,iVBORw0KGg... 表示的是一张图片
热门推荐
海涛高软
03-01 4万+
FR:徐海涛（hunk Xu) QQ技术交流群：386476712
flutter 图片转base64
10-25
在Flutter开发中，将图片转换为base64是常见的操作之一，通常用于上传图片或者将图片展示在页面上。可以通过以下步骤将图片转换为base64： 1. 使用image_picker插件从相册或相机中选择图片，并将其转换为File对象。 2. 读取File对象中的字节数据，使用dart:convert库中的base64Encode方法将其转换为base64字符串。 3. 将base64字符串添加到"data:image/png;base64,"这样的格式中，以便在页面上正确显示图片。 以下是一个示例代码，演示如何将选择的图片转换为base64字符串并打印出来： ``` import 'dart:convert'; import 'dart:io'; import 'package:image_picker/image_picker.dart'; void _getImage() async { XFile? file = await ImagePicker().pickImage(source: ImageSource.gallery); if (file == null) return; File imageFile = File(file.path); List<int> imageBytes = await imageFile.readAsBytes(); String base64Image = base64Encode(imageBytes); String base64ImageWithHeader = "data:image/png;base64," + base64Image; print(base64ImageWithHeader); } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值