改变世界的webp图片技术,节约你的流量和带宽


痛点:

很多网站和app有高清图片展示的需求,前后端交互时有很大的流量,在线用户量大时带宽压力随之增大。目前针对图片服务的第三方,有阿里云的oss图片存储服务器,七牛云和又拍云,价格都不便宜。怎样能够少流量又高效地服务用户呢?webp图片编码技术应运而生(可能google根本没考虑这点,只是为了提高网络图片传输速度,哈哈)。

技术栈:

1.前端基于dart的flutter框架,主要用于构建android和ios移动应用软件;
2.后端基于golang的gin开发框架,负责提供webp静态资源图片。

解决方案:

1.客户端向服务器请求图片时,获取webp格式的图片,这里我请求一张大小为76kb的高清图片。
改变世界的webp图片技术,节约你的流量和带宽
2.在flutter端展示时,我们使用CachedNetworkImage这个组件将其缓存。所见即所得,用户看到的图片都不用二次请求,直接从缓存写入相册中。这里注意一下cacheManager的用法,是一个单例对象。

abstract class BaseCacheManager {
/// Creates a new instance of a cache manager. This can be used to retrieve
/// files from the cache or download them online. The http headers are used
/// for the maximum age of the files. The BaseCacheManager should only be
/// used in singleton patterns.

flutter端webp图片展示如下:
改变世界的webp图片技术,节约你的流量和带宽

3.然后我们在手机缓存中找到webp图片文件,通过dart的image库将其转换为png、jpg或者其他图片格式,保存至相册。

import 'package:image/image.dart' as DownloadImage;

这里我们储存为png格式,效果如下图,大小为745kb:
改变世界的webp图片技术,节约你的流量和带宽
改变世界的webp图片技术,节约你的流量和带宽
小结:webp图片传输大小为76kb,从手机缓存中恢复到相册.png形式,大小为745kb,节约了89.8%的流量费用,也降低了带宽压力。

示例源码:
flutter客户端

import 'dart:io';

import 'package:image/image.dart' as DownloadImage;

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';

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

class EpubWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new EpubState();
}
}

class EpubState extends State<EpubWidget> {

final BaseCacheManager _cacheManager = DefaultCacheManager();

final String _imgUrl = 'http://192.168.0.113:8888/image/model.webp';

File _file;

@override
Widget build(BuildContext context) {

//动态申请储存权限
PermissionHandler().checkPermissionStatus(PermissionGroup.storage).then((pStatus){
if(pStatus == PermissionStatus.granted){
debugPrint("already get the right to save image on the phone");
return;
}else{
PermissionHandler().requestPermissions(<PermissionGroup>[
PermissionGroup.storage, // 在这里添加需要的权限
]);
}
});

return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Fetch Epub Example",
home: new Material(
child: Scaffold(
body: Column(
children: <Widget>[
// Image.asset('assets/img0.webp'),
CachedNetworkImage(
imageUrl: _imgUrl,
),
Padding(
padding: const EdgeInsets.only(top: 60),
child: RaisedButton(
onPressed: () async{
FileInfo _fromMemory = _cacheManager.getFileFromMemory(_imgUrl);
DownloadImage.Image image = DownloadImage.decodeImage(File(_fromMemory.file.path).readAsBytesSync());

// Resize the image to a 120x? thumbnail (maintaining the aspect ratio).
DownloadImage.Image thumbnail = DownloadImage.copyResize(image, width: 120);

// Save the thumbnail as a JPG.
final dir = await getApplicationDocumentsDirectory();
// _file = File('${dir.path}/thumbnail.png')..writeAsBytesSync(DownloadImage.encodePng(thumbnail));
_file = File('${dir.path}/thumbnail.png')..writeAsBytesSync(DownloadImage.encodePng(image));
final result = await ImageGallerySaver.saveFile(_file.path);
print('result is $result');
setState(() { });
},
child: Text('download image'),
),
),
if(_file!=null)
Image.file(_file)
],
),
)
)
);
}
}

golang服务端

package main

import (
"net/http"

"github.com/gin-gonic/gin"
)

func main() {

router := gin.Default()
router.StaticFS("/image", http.Dir("./image")) //图片model.webp保存在image文件夹下

router.Run(":8888")
}

舔狗被骗了一万零八百,实在没钱吃饭了,兄弟们如果都看到这里了,麻烦打赏个10块钱,让我吃个蛋炒饭吧, 球球啦~
改变世界的webp图片技术,节约你的流量和带宽

附言

webp转储jpg、png等任意格式图片在前端完成;而任意格式图片重新编码为webp的时间消耗较大,最好放在后台,这里借鉴一下别人的golang处理办法

golang后台任意图片转储为webp格式

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

改变世界的webp图片技术,节约你的流量和带宽

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 改变世界的webp图片技术,节约你的流量和带宽
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏