anproto personal data server
evbogue.com
1// Visualize Buffer by Dominic Tarr https://github.com/dominictarr/visualize-buffer
2
3export function vb (b, width) {
4 width = width || 256
5 var canvas = document.createElement('canvas')
6
7 canvas.height = width
8 canvas.width = width
9
10 var ctx = canvas.getContext('2d')
11
12 var blocks = Math.ceil(Math.sqrt(b.length*2))
13
14 var B = Math.ceil(width/blocks)
15 function rect(i, color) {
16 var x = i % blocks
17 var y = ~~(i / blocks)
18 if(color < 12)
19 ctx.fillStyle =
20 'hsl('+(color/12)*360 + ',100%,50%)'
21 else {
22 ctx.fillStyle =
23 'hsl(0,0%,'+~~(((color-12)/3)*100)+'%'
24 }
25 ctx.fillRect(x*B, y*B, B, B)
26 }
27
28 for(var i = 0; i < b.length; i++) {
29 rect(2*i, b[i] >> 4 & 15)
30 rect(2*i + 1, b[i] & 15)
31 }
32
33 var img = document.createElement('img')
34 img.src = canvas.toDataURL()
35 return img
36}