探索前端黑科技——通过 png 图的 rgba 值缓存数据

541 查看

说起前端缓存，大部分人想到的无非是几个常规的方案，比如cookie，localStorage，sessionStorage，或者加上indexedDB和webSQL，以及manifest离线缓存。除此之外，到底还有没有别的方法可以进行前端的数据缓存呢？这篇文章将会带你一起来探索，如何一步一步地通过png图的rgba值来缓存数据的黑科技之旅。

原理

我们知道，通过为静态资源设置Cache-Control和Expires响应头，可以迫使浏览器对其进行缓存。浏览器在向后台发起请求的时候，会先在自身的缓存里面找，如果缓存里面没有，才会继续向服务器请求这个静态资源。利用这一点，我们可以把一些需要被缓存的信息通过这个静态资源缓存机制来进行储存。

那么我们如何把信息写入到静态资源中呢？canvas提供了.getImageData()方法和.createImageData()方法，可以分别用于读取和设置图片的rgba值。所以我们可以利用这两个API进行信息的读写操作。

接下来看原理图：

当静态资源进入缓存，以后的任何对于该图片的请求都会先查找本地缓存，也就是说信息其实已经以图片的形式被缓存到本地了。

注意，由于rgba值只能是[0, 255]之间的整数，所以本文所讨论的方法仅适用于纯数字组成的数据。

静态服务器

我们使用node搭建一个简单的静态服务器：

const fs = require('fs')

const http = require('http')

const url = require('url')

const querystring = require('querystring')

const util = require('util')

const server = http.createServer((req, res) => {

let pathname = url.parse(req.url).pathname

let realPath = 'assets' + pathname

console.log(realPath)

if (realPath !== 'assets/upload') {

fs.readFile(realPath, "binary", function(err, file) {

if (err) {

res.writeHead(500, {'Content-Type': 'text/plain'})

res.end(err)

} else {

res.writeHead(200, {

'Access-Control-Allow-Origin': '*',

'Content-Type': 'image/png',

'ETag': "666666",

'Cache-Control': 'public, max-age=31536000',

'Expires': 'Mon, 07 Sep 2026 09:32:27 GMT'

})

res.write(file, "binary")

res.end()

}

})

} else {

let post = ''

req.on('data', (chunk) => {

post += chunk

})

req.on('end', () => {

post = querystring.parse(post)

console.log(post.imgData)

res.writeHead(200, {

'Access-Control-Allow-Origin': '*'

})

let base64Data = post.imgData.replace(/^data:image\/\w+;base64,/, "")

let dataBuffer = new Buffer(base64Data, 'base64')

fs.writeFile('assets/out.png', dataBuffer, (err) => {

if (err) {

res.write(err)

res.end()

}

res.write('OK')

res.end()

})

}

})

server.listen(80)

console.log('Listening on port: 80')

这个静态资源的功能很简单，它提供了两个功能：通过客户端传来的base64生成图片并保存到服务器；设置图片的缓存时间并发送到客户端。

关键部分是设置响应头：

res.writeHead(200d>

res.writeHead(200将会带你一起来探索，如何一步一步地通过png图的rgba值来缓存数据的黑科技之旅。

原理

接下来看原理图：

当静态资源进入缓存，以后的任何对于该图片的请求都会先查找本地缓存，也就是说信息其实已经以图片的形式被缓存到本地了。

注意，由于rgba值只能是[0, 255]之间的整数，所以本文所讨论的方法仅适用于纯数字组成的数据。

静态服务器

我们使用node搭建一个简单的静态服务器：

const fs = require('fs')

const http = require('http')

const url = require('url')

const querystring = require('querystring')

const util = require('util')

const server = http.createServer((req, res) => {

let pathname = url.parse(req.url).pathname

let realPath = 'assets' + pathname

console.log(realPath)

if (realPath !== 'assets/upload') {

fs.readFile(realPath, "binary", function(err, file) {

if (err) {

res.writeHead(500, {'Content-Type': 'text/plain'})

res.end(err)

} else {

res.writeHead(200, {

'Access-Control-Allow-Origin': '*',

'Content-Type': 'image/png',

'ETag': "666666",

'Cache-Control': 'public, max-age=31536000',

'Expires': 'Mon, 07 Sep 2026 09:32:27 GMT'

})

res.write(file, "binary")

res.end()

}

})

} else {

let post = ''

req.on('data', (chunk) => {

post += chunk

})

req.on('end', () => {

post = querystring.parse(post)

console.log(post.imgData)

res.writeHead(200, {

'Access-Control-Allow-Origin': '*'

})

let base64Data = post.imgData.replace(/^data:image\/\w+;base64,/, "")

let dataBuffer = new Buffer(base64Data, 'base64')

fs.writeFile('assets/out.png', dataBuffer, (err) => {

if (err) {

res.write(err)

res.end()

}

res.write('OK')

res.end()

})

}

})

server.listen(80)

console.log('Listening on port: 80')

这个静态资源的功能很简单，它提供了两个功能：通过客户端传来的base64生成图片并保存到服务器；设置图片的缓存时间并发送到客户端。

关键部分是设置响应头：