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

)

我们知道，经由过程为静态资本设置Cache-Control和Expires响应头，可以迫使浏览器对其进行缓存。浏览器在向后台提议请求的时刻，会先在自身的缓存琅绫擎找，如不雅缓存琅绫擎没有，才会持续向办事器请求这个静态资本。应用这一点，我们可以把一些须要被缓存的信息经由过程这个静态资本缓存机制来进行储存。

这个静态资本的功能很简单，它供给了两个功能：经由过程客户端传来的base64生成图片并保存到办事器;设置图片的缓存时光并发送到客户端。

说是黑科技，其实袈洵理异常简单，与之类似的还有经由过程Etag等办法进行强缓存。研究的目标仅仅为了进修，切切不要作为不法之用。如不雅读者们发明这篇文┞仿有什么讹夺之处，迎接斧正，也欲望有兴趣的同伙可以一路进行评论辩论。

关键部分是设置响应头：

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' 
 
})

我们为这张图片设置了一年的Content-Type和十年的Expires，理论上足够长了。下面我们来进行客户端的coding。

客户端

<!-- client.html --> 
 
  
 
<canvas id="canvas" width="8", height="1"></canvas>

假设我们须要存储的是32位的数据，所以我们为canvas设置宽度为8，高度为1。到底为什么32位数据对应长度为8，是因为每一个像素都有一个rgba，对应着red，green，blue和alpha4个数值，所以须要除以4。

<!-- client.js --> 
 
  
 
let keyString = '01234567890123456789012345678901' 
 
         
 
let canvas = document.querySelector('#canvas') 
 
let ctx = canvas.getContext('2d') 
 
  
 
let imgData = ctx.createImageData(8, 1) 
 
  
 
for (let i = 0; i < imgData.data.length; i += 4) { 
 
    imgData.data[i + 0] = parseInt(keyString[i]) + 50 
 
    imgData.data[i + 1] = parseInt(keyString[i + 1]) + 100 
 
    imgData.data[i + 2] = parseInt(keyString[i + 2]) + 150 
 
    imgData.data[i + 3] = parseInt(keyString[i + 3]) + 200 	
			 3/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　C盘哪些文件可以删除？Windows 7系统C盘瘦身三大方法介绍
            
            1、打开开端菜单—附件—在敕令提示符上右键，选择以治理员身份运行：C盘哪些文件可以删除?实际上如不雅只是纯真的清理垃圾并不克不及整顿出若干空间，而经由过程Win7体系C盘瘦>>>详细阅读


本文标题：探索前端黑科技——通过png图的rgba值缓存数据
地址：http://www.17bianji.com/lsqh/36204.html
 1/2    1