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

}

ctx.putImageData(imgData, 0, 0)

起首我们假设须要被缓存的字符串为32位的01234567890123456789012345678901，然后我们应用.createImageData(8, 1)生成一个空白的imgData对象。接下来，我们对这个空对象进行赋值。为了实验效不雅加倍直不雅，我们对rgba值都进行了放大年夜。设置完了imgData今后，经由过程.putImageData()办法把它放入我们的canvas即可。

我们如今可以打印一下，看看这个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]

$.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) 
 
        } 
 
    } 
 
})

结不雅分析

开启办事器，运行客户端，第一次加载的时刻经由过程控制台可以看到响应的图片信息：

200 OK，证实是大年夜办事端获取的图片。

封闭当前页面，从新载入：

200 OK (from cache)，证实是大年夜本地缓存攫取的图片。

接下来直接看rgba值的比较：

源数据： [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]

缓存数据：[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]

代码很简单，经由过程.toDataURL()办法把base64发送到办事器，办事器处理后生成图片并返回，其图片资本地址为http://xx.xx.xx.xx:80/out.png。在img.onload后，其实图片就已经完成了本地缓存了，我们在这个事宜傍边把图片信息打印出来，作为和源数据的比较。

之前获得的结论，源数据与缓存数据存在误差的原因，经查证后肯定为alpha值的干扰所致。如不雅我们把alpha值直接定为255，并且只把数据存放在rgb值内部，即可清除误差。下面是改进后的结不雅：

源数据： [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]

缓存数据：[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而没有把轮回赋值的逻辑进行更新，所以第4n位的元数据被直接调换成了255，这个留着读者自行修改有空再改……

4/5 首页上一页 2 3 4 5 下一页尾页

　　推荐阅读

　　C盘哪些文件可以删除？Windows 7系统C盘瘦身三大方法介绍

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

本文标题：探索前端黑科技——通过png图的rgba值缓存数据

地址：http://www.17bianji.com/lsqh/36204.html

1/2 1