1. 背景

在一些安全场景，或者一些本地化的场景（如本地化的 Markdown 记事本），如果有图片上传并需要查看的场景，在不上传到服务器的情况下，实现这个效果，通常是把图片 Base64 化，但编码后的字符串会非常长，体验较差。

这里不妨尝试使用 ServiceWorker + IndexedDB 来解决这个问题。

2. API 优势

IndexedDB 几乎什么都可以存储，二进制类的文件更不在话下，且存储空间在大多数浏览器中，是和系统空间持平的。

ServiceWorker 可以做页面的网络代理层，所以就不需要 Base64 化了，可以直接写一个特定规则的图片地址，实现从 IndexedDB 中读/写文件。

3. 实现

例如把这种特殊的图片采用 .dbimg 后缀。

上传图片时，就可以通过拦截上传请求的方式实现，流程如下：

self.addEventListener("fetch", (e) => {const url = e.request.url;if (e.request.method == "POST" && url.indexOf("update-img") > -1) {e.respondWith(e.request.formData().then((data) => {const file = data.get("img");const name = Date.now() + Math.random().toString().substr(2, 4);db.put("img", { name, file });return new Response(JSON.stringify({name: name + ".dbimg",}));}));}
});

读取时，通过判断 .dbimg 后缀实现，流程如下：

self.addEventListener("fetch", (e) => {const url = e.request.url;if (e.request.method == "GET" && url.substr(url.length - 6) == ".dbimg") {const name = url.substring(url.lastIndexOf("/") + 1, url.lastIndexOf("."));e.respondWith(db.getAllMatching("img", { index: "name", query: IDBKeyRange.only(name) }).then((data) => {if (data.length) {return new Response(data[0].file);}return new Response("", { status: 404 });}));}
});

4. 效果

体验地址：https://lecepin.github.io/file-proxy-indexedDB/

⭐ 仓库地址：https://github.com/lecepin/file-proxy-indexedDB

⭐ 原文地址

实现图片本地化 ServiceWorker + IndexedDB相关推荐

织梦本地调试运行PHP不显示图片,织梦dedecms不能下载远程图片实现图片本地化解决方法...
DEDE图片本地化失效的主要原因: 服务器上的运行环境中禁用了fsockopen()函数解决方案一: 在用fsockopen()的地方用stream_socket_client()函数代替. 具体修 ...
QueryList4采集-图片本地化
QueryList4采集图片本地化 //采集public function cai() {//采集的url地址$data = QueryList::get('https://news.ke.com/s ...
多功能搜索友联自助交换多色彩皮肤网站图片本地化附带交易系统网址导航源码蜘蛛
介绍: QQ登录友联自助交换友情链接交易功能多功能搜索 ico小图标本地化网站图片本地化蜘蛛日志文章评论网站评论自助链接匿名提交站点,添加友链访问网站自动审核通过会员等级 VIP 付 ...
火车头dede采集接口，图片加水印，远程图片本地化，远程无后缀的无图片本地化...
<?php /*[LocoySpider] (C)2005-2010 Lewell Inc.火车采集器 DedeCMS 5.7 UTF8 文章发布接口 Update content: 图片加水印 ...
织梦网站数据入库接口（实现图片本地化,自动图片打水印）【原创】
最近接手织梦网站开发,做了一个织梦批量入库接口,可对接各种采集器,实现的功能有:图片本地化,图片自动水印,做好了SEO的文章排版,有利于SEO,希望对大家有所帮助! <?php /*应用:Ded ...
ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化
ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化,图片远程本地化插件,ecshop远 ...
Markdown图片本地化
Markdown图片本地化根据Img_link_to_local_markdown修改项目地址:Md-ImgLocalize 本代码将扫描给定文件夹下所有的markdown文件,对于每个markd ...
疯子网页采集器教程之图片本地化教程
疯子网页采集器教程之图片本地化教程第一步: 选中 "图片本地化" 填写首页地址,比如http://www.zhuvl.com 必需填写http://否则会出错第二步:在服务器根 ...
php图片本地化,PHP_php将远程图片保存到本地服务器的实现代码，php如何将远程图片本地化，本 - phpStudy...
php将远程图片保存到本地服务器的实现代码 php如何将远程图片本地化,本文分享了实现代码 //站点根目录 $cfg_basedir = dirname(__FILE__); //停建目录属性 $cf ...

实现图片本地化 ServiceWorker + IndexedDB

1. 背景

2. API 优势

3. 实现

4. 效果

实现图片本地化 ServiceWorker + IndexedDB相关推荐

最新文章

热门文章