日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
探索前端黑科技——通過png圖的rgba值緩存數(shù)據(jù)

說起前端緩存，大部分人想到的無非是幾個常規(guī)的方案，比如cookie，localStorage，sessionStorage，或者加上indexedDB和webSQL，以及manifest離線緩存。除此之外，到底還有沒有別的方法可以進(jìn)行前端的數(shù)據(jù)緩存呢?這篇文章將會帶你一起來探索，如何一步一步地通過png圖的rgba值來緩存數(shù)據(jù)的黑科技之旅。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)與策劃設(shè)計,林口網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:林口等地區(qū)。林口做網(wǎng)站價格咨詢:13518219792

原理

我們知道，通過為靜態(tài)資源設(shè)置Cache-Control和Expires響應(yīng)頭，可以迫使瀏覽器對其進(jìn)行緩存。瀏覽器在向后臺發(fā)起請求的時候，會先在自身的緩存里面找，如果緩存里面沒有，才會繼續(xù)向服務(wù)器請求這個靜態(tài)資源。利用這一點，我們可以把一些需要被緩存的信息通過這個靜態(tài)資源緩存機制來進(jìn)行儲存。

那么我們?nèi)绾伟研畔懭氲届o態(tài)資源中呢?canvas提供了.getImageData()方法和.createImageData()方法，可以分別用于讀取和設(shè)置圖片的rgba值。所以我們可以利用這兩個API進(jìn)行信息的讀寫操作。

接下來看原理圖：

當(dāng)靜態(tài)資源進(jìn)入緩存，以后的任何對于該圖片的請求都會先查找本地緩存，也就是說信息其實已經(jīng)以圖片的形式被緩存到本地了。

注意，由于rgba值只能是[0, 255]之間的整數(shù)，所以本文所討論的方法僅適用于純數(shù)字組成的數(shù)據(jù)。

靜態(tài)服務(wù)器

我們使用node搭建一個簡單的靜態(tài)服務(wù)器：

 
 
 
 
    
  
  
  
  
  1. const fs = require('fs') 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. const http = require('http') 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const url = require('url') 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. const querystring = require('querystring') 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. const util = require('util') 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. const server = http.createServer((req, res) => { 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.   let pathname = url.parse(req.url).pathname 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.   let realPath = 'assets' + pathname 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.   console.log(realPath) 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.   if (realPath !== 'assets/upload') { 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23.      fs.readFile(realPath, "binary", function(err, file) { 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.       if (err) { 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.         res.writeHead(500, {'Content-Type': 'text/plain'}) 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.         res.end(err) 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.       } else { 
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33.         res.writeHead(200, { 
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35.           'Access-Control-Allow-Origin': '*', 
    36.   
  
  
  
  36.  
    37.   
  
  
  
  37.           'Content-Type': 'image/png', 
    38.   
  
  
  
  38.  
    39.   
  
  
  
  39.           'ETag': "666666", 
    40.   
  
  
  
  40.  
    41.   
  
  
  
  41.           'Cache-Control': 'public, max-age=31536000', 
    42.   
  
  
  
  42.  
    43.   
  
  
  
  43.           'Expires': 'Mon, 07 Sep 2026 09:32:27 GMT' 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45.         }) 
    46.   
  
  
  
  46.  
    47.   
  
  
  
  47.         res.write(file, "binary") 
    48.   
  
  
  
  48.  
    49.   
  
  
  
  49.         res.end() 
    50.   
  
  
  
  50.  
    51.   
  
  
  
  51.       } 
    52.   
  
  
  
  52.  
    53.   
  
  
  
  53.    }) 
    54.   
  
  
  
  54.  
    55.   
  
  
  
  55.   } else { 
    56.   
  
  
  
  56.  
    57.   
  
  
  
  57.     let post = '' 
    58.   
  
  
  
  58.  
    59.   
  
  
  
  59.     req.on('data', (chunk) => { 
    60.   
  
  
  
  60.  
    61.   
  
  
  
  61.       post += chunk 
    62.   
  
  
  
  62.  
    63.   
  
  
  
  63.     }) 
    64.   
  
  
  
  64.  
    65.   
  
  
  
  65.     req.on('end', () => { 
    66.   
  
  
  
  66.  
    67.   
  
  
  
  67.       post = querystring.parse(post) 
    68.   
  
  
  
  68.  
    69.   
  
  
  
  69.       console.log(post.imgData) 
    70.   
  
  
  
  70.  
    71.   
  
  
  
  71.       res.writeHead(200, { 
    72.   
  
  
  
  72.  
    73.   
  
  
  
  73.         'Access-Control-Allow-Origin': '*' 
    74.   
  
  
  
  74.  
    75.   
  
  
  
  75.       }) 
    76.   
  
  
  
  76.  
    77.   
  
  
  
  77.       let base64Data = post.imgData.replace(/^data:image\/\w+;base64,/, "") 
    78.   
  
  
  
  78.  
    79.   
  
  
  
  79.       let dataBuffer = new Buffer(base64Data, 'base64') 
    80.   
  
  
  
  80.  
    81.   
  
  
  
  81.       fs.writeFile('assets/out.png', dataBuffer, (err) => { 
    82.   
  
  
  
  82.  
    83.   
  
  
  
  83.         if (err) { 
    84.   
  
  
  
  84.  
    85.   
  
  
  
  85.           res.write(err) 
    86.   
  
  
  
  86.  
    87.   
  
  
  
  87.           res.end() 
    88.   
  
  
  
  88.  
    89.   
  
  
  
  89.         } 
    90.   
  
  
  
  90.  
    91.   
  
  
  
  91.         res.write('OK') 
    92.   
  
  
  
  92.  
    93.   
  
  
  
  93.         res.end() 
    94.   
  
  
  
  94.  
    95.   
  
  
  
  95.       }) 
    96.   
  
  
  
  96.  
    97.   
  
  
  
  97.     }) 
    98.   
  
  
  
  98.  
    99.   
  
  
  
  99.   } 
    100.   
  
  
  
  100.  
    101.   
  
  
  
  101. }) 
    102.   
  
  
  
  102.  
    103.   
  
  
  
  103.   
    104.   
  
  
  
  104.  
    105.   
  
  
  
  105. server.listen(80) 
    106.   
  
  
  
  106.  
    107.   
  
  
  
  107.   
    108.   
  
  
  
  108.  
    109.   
  
  
  
  109. console.log('Listening on port: 80')  
    110.

這個靜態(tài)資源的功能很簡單，它提供了兩個功能：通過客戶端傳來的base64生成圖片并保存到服務(wù)器;設(shè)置圖片的緩存時間并發(fā)送到客戶端。

關(guān)鍵部分是設(shè)置響應(yīng)頭：

 
 
 
 
    
  
  
  
  
  1. res.writeHead(200, { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   'Access-Control-Allow-Origin': '*', 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.   'Content-Type': 'image/png', 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.   'ETag': "666666", 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.   'Cache-Control': 'public, max-age=31536000', 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   'Expires': 'Mon, 07 Sep 2026 09:32:27 GMT' 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. })  
    14.

我們?yōu)檫@張圖片設(shè)置了一年的Content-Type和十年的Expires，理論上足夠長了。下面我們來進(jìn)行客戶端的coding。

客戶端

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.   
    6.

假設(shè)我們需要存儲的是32位的數(shù)據(jù)，所以我們?yōu)閏anvas設(shè)置寬度為8，高度為1。到底為什么32位數(shù)據(jù)對應(yīng)長度為8，是因為每一個像素都有一個rgba，對應(yīng)著red，green，blue和alpha4個數(shù)值，所以需要除以4。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. let keyString = '01234567890123456789012345678901' 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.          
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. let canvas = document.querySelector('#canvas') 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. let ctx = canvas.getContext('2d') 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.   
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. let imgData = ctx.createImageData(8, 1) 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.   
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. for (let i = 0; i < imgData.data.length; i += 4) { 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.     imgData.data[i + 0] = parseInt(keyString[i]) + 50 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23.     imgData.data[i + 1] = parseInt(keyString[i + 1]) + 100 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.     imgData.data[i + 2] = parseInt(keyString[i + 2]) + 150 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.     imgData.data[i + 3] = parseInt(keyString[i + 3]) + 200 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29. } 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.   
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33. ctx.putImageData(imgData, 0, 0)  
    34.

首先我們假設(shè)需要被緩存的字符串為32位的01234567890123456789012345678901，然后我們使用.createImageData(8, 1)生成一個空白的imgData對象。接下來，我們對這個空對象進(jìn)行賦值。為了實驗效果更加直觀，我們對rgba值都進(jìn)行了放大。設(shè)置完了imgData以后，通過.putImageData()方法把它放入我們的canvas即可。

我們現(xiàn)在可以打印一下，看看這個imgData是什么：

 
 
 
 
    
  
  
  
  
  1. // console.log(imgData.data) 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. [50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201, 52, 103, 154, 205, 56, 107, 158, 209, 50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201]  
    4.

接下來，我們要把這個canvas編譯為一張圖片的base64并發(fā)送給服務(wù)器，同時接收服務(wù)器的響應(yīng)，對圖片進(jìn)行緩存：

 
 
 
 
    
  
  
  
  
  1. $.post('http://xx.xx.xx.xx:80/upload', { imgData: canvas.toDataURL() }, (data) => { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.     if (data === 'OK') { 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.         let img = new Image() 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.         img.crossOrigin = "anonymous" 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.         img.src = 'http://xx.xx.xx.xx:80/out.png' 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.         img.onload = () => { 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.             console.log('完成圖片請求與緩存') 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.             ctx.drawImage(img, 0, 0) 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.             console.log(ctx.getImageData(0, 0, 8, 1).data) 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.         } 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.     } 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23. })  
    24.

代碼很簡單，通過.toDataURL()方法把base64發(fā)送到服務(wù)器，服務(wù)器處理后生成圖片并返回，其圖片資源地址為http://xx.xx.xx.xx:80/out.png。在img.onload后，其實圖片就已經(jīng)完成了本地緩存了，我們在這個事件當(dāng)中把圖片信息打印出來，作為和源數(shù)據(jù)的對比。

結(jié)果分析

開啟服務(wù)器，運行客戶端，***次加載的時候通過控制臺可以看到響應(yīng)的圖片信息：

200 OK，證明是從服務(wù)端獲取的圖片。

關(guān)閉當(dāng)前頁面，重新載入：

200 OK (from cache)，證明是從本地緩存讀取的圖片。

接下來直接看rgba值的對比：

源數(shù)據(jù)： [50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201, 52, 103, 154, 205, 56, 107, 158, 209, 50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201]

緩存數(shù)據(jù)：[50, 100, 152, 245, 54, 105, 157, 246, 57, 109, 149, 244, 52, 103, 154, 245, 56, 107, 157, 247, 50, 100, 152, 245, 54, 105, 157, 246, 57, 109, 149, 244]

之前得到的結(jié)論，源數(shù)據(jù)與緩存數(shù)據(jù)存在誤差的原因，經(jīng)查證后確定為alpha值的干擾所致。如果我們把alpha值直接定為255，并且只把數(shù)據(jù)存放在rgb值內(nèi)部，即可消除誤差。下面是改良后的結(jié)果：

源數(shù)據(jù)： [0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255, 2, 3, 4, 255, 6, 7, 8, 255, 0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255]

緩存數(shù)據(jù)：[0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255, 2, 3, 4, 255, 6, 7, 8, 255, 0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255]

因為我懶，只是把alpha值給定為255而沒有把循環(huán)賦值的邏輯進(jìn)行更新，所以第4n位的元數(shù)據(jù)被直接替換成了255，這個留著讀者自行修改有空再改……

綜上所述，這個利用png圖的rgba值緩存數(shù)據(jù)的黑科技，在理論上是可行的，但是在實際操作過程中可能還要考慮更多的影響因素，比如設(shè)法消除服務(wù)端的誤差，采取容錯機制等。實際上也是可行的。

值得注意的是，localhost可能默認(rèn)會直接通過本地而不是服務(wù)器請求資源，所以在本地實驗中，可以通過設(shè)置header進(jìn)行cors跨域，并且通過設(shè)置IP地址和80端口模擬服務(wù)器訪問。

后記

說是黑科技，其實原理非常簡單，與之類似的還有通過Etag等方法進(jìn)行強緩存。研究的目的僅僅為了學(xué)習(xí)，千萬不要作為非法之用。如果讀者們發(fā)現(xiàn)這篇文章有什么錯漏之處，歡迎指正，也希望有興趣的朋友可以一起進(jìn)行討論。


本文名稱：探索前端黑科技——通過png圖的rgba值緩存數(shù)據(jù)
網(wǎng)頁地址：http://www.5511xx.com/article/cceegpe.html