這篇文章主要介紹“html5中怎么通過png圖的rgba值緩存數(shù)據(jù)”，在日常操作中，相信很多人在html5中怎么通過png圖的rgba值緩存數(shù)據(jù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5中怎么通過png圖的rgba值緩存數(shù)據(jù)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司是少有的網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、營銷型企業(yè)網(wǎng)站、小程序開發(fā)、手機(jī)APP,開發(fā)、制作、設(shè)計、買友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,從2013年成立,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

原理

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

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

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

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

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

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

客戶端

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

假設(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。

<!-- 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 }  ctx.putImageData(imgData, 0, 0)

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

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

// console.log(imgData.data)  [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]

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

$.post('http://xx.xx.xx.xx:80/upload', { imgData: canvas.toDataURL() }, (data) => {     if (data === 'OK') {         let img = new Image()         img.crossOrigin = "anonymous"         img.src = 'http://xx.xx.xx.xx:80/out.png'         img.onload = () => {             console.log('完成圖片請求與緩存')             ctx.drawImage(img, 0, 0)             console.log(ctx.getImageData(0, 0, 8, 1).data)         }     } })

代碼很簡單，通過.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]

到此，關(guān)于“html5中怎么通過png圖的rgba值緩存數(shù)據(jù)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

當(dāng)前題目：html5中怎么通過png圖的rgba值緩存數(shù)據(jù)
當(dāng)前網(wǎng)址：http://aaarwkj.com/article28/ihpjjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)頁設(shè)計公司、外貿(mào)建站、微信公眾號、網(wǎng)站排名、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)