|
51 | 51 | <br><br> |
52 | 52 | <span id="stats"></span> |
53 | 53 | <br><br> |
| 54 | + Default decoder:<br> |
54 | 55 | <canvas id="output" style="border: 1px solid black"></canvas> |
55 | 56 | <br><br> |
| 57 | + L2 decoder (wasm):<br> |
| 58 | + <canvas id="output_wasm" style="border: 1px solid black"></canvas> |
| 59 | + <br><br> |
56 | 60 | Reencoded with img2sixel:<br> |
57 | 61 | <canvas id="output2" style="border: 1px solid black"></canvas> |
58 | 62 | <script src="/dist/bundle.js"></script> |
|
61 | 65 |
|
62 | 66 | let drawHandle = null; |
63 | 67 | let imgS = null; |
| 68 | +let imgWasm = null; |
| 69 | +let wasmDecoder = null; |
| 70 | +sixel.WasmDecoderAsync().then(dec => wasmDecoder = dec); |
| 71 | + |
| 72 | +function decodeWasm(bytes) { |
| 73 | + const start = new Date(); |
| 74 | + const dim = new sixel.DimensionDecoder().decode(bytes); |
| 75 | + console.log('L2 attrs:', dim); |
| 76 | + if (sixel.canUseWasm(dim.width, dim.height, 4096)) { |
| 77 | + wasmDecoder.init( |
| 78 | + dim.width, |
| 79 | + dim.height, |
| 80 | + sixel.toRGBA8888(...hexColorToRGB(document.getElementById('fillColor').value)) |
| 81 | + ); |
| 82 | + wasmDecoder.decode(bytes); |
| 83 | + } |
| 84 | + drawImageL2(wasmDecoder.data32, wasmDecoder.width, wasmDecoder.height); |
| 85 | + console.log('L2 conversion:', (new Date()) - start); |
| 86 | +} |
| 87 | + |
| 88 | +function drawImageL2(data, width, height) { |
| 89 | + if (!height || !width) { |
| 90 | + return; |
| 91 | + } |
| 92 | + const canvas = document.getElementById('output_wasm'); |
| 93 | + const ctx = canvas.getContext('2d'); |
| 94 | + // resize canvas to show full image |
| 95 | + canvas.width = width; |
| 96 | + canvas.height = height; |
| 97 | + const target = new ImageData(width, height); |
| 98 | + new Uint32Array(target.data.buffer).set(data); |
| 99 | + ctx.putImageData(target, 0, 0); |
| 100 | +} |
64 | 101 |
|
65 | 102 | /** |
66 | 103 | * example how to get the img data |
|
75 | 112 | canvas.width = img.width; |
76 | 113 | canvas.height = img.height; |
77 | 114 | // grab imagedata |
78 | | - const target = ctx.getImageData(0, 0, img.width, img.height); |
| 115 | + // const target = ctx.getImageData(0, 0, img.width, img.height); |
| 116 | + const target = new ImageData(img.width, img.height); |
79 | 117 | img.toPixelData( |
80 | 118 | // target metrics |
81 | 119 | target.data, img.width, img.height, |
|
90 | 128 | ctx.putImageData(target, 0, 0); |
91 | 129 |
|
92 | 130 | // test encoding by re-encoding the output above |
93 | | - const reEncoded = sixel.image2sixel(target.data, img.width, img.height); |
94 | | - const six2 = new sixel.SixelDecoder(); |
95 | | - six2.decodeString(reEncoded.slice(7, -2)); // strip off enclosing escape sequence |
96 | | - const canvas2 = document.getElementById('output2'); |
97 | | - canvas2.width = six2.width; |
98 | | - canvas2.height = six2.height; |
99 | | - const ctx2 = canvas2.getContext('2d'); |
100 | | - const target2 = ctx.getImageData(0, 0, six2.width, six2.height); |
101 | | - six2.toPixelData(target2.data, six2.width, six2.height); |
102 | | - ctx2.putImageData(target2, 0, 0); |
| 131 | + //const reEncoded = sixel.image2sixel(target.data, img.width, img.height); |
| 132 | + //const dim = new sixel.DimensionDecoder().decodeString(reEncoded.slice(7, -2)); |
| 133 | + //if (sixel.canUseWasm(dim.width, dim.height, 4096)) { |
| 134 | + // wasmDecoder.init(dim.width, dim.height, 0) |
| 135 | + // wasmDecoder.decodeString(reEncoded.slice(7, -2)); |
| 136 | + // const canvas2 = document.getElementById('output2'); |
| 137 | + // canvas2.width = dim.width; |
| 138 | + // canvas2.height = dim.height; |
| 139 | + // const ctx2 = canvas2.getContext('2d'); |
| 140 | + // const target2 = ctx.getImageData(0, 0, dim.width, dim.height); |
| 141 | + // new Uint32Array(target2.data.buffer).set(wasmDecoder.data32); |
| 142 | + // ctx2.putImageData(target2, 0, 0); |
| 143 | + //} else { |
| 144 | + // const six2 = new sixel.SixelDecoder(); |
| 145 | + // six2.decodeString(reEncoded.slice(7, -2)); // strip off enclosing escape sequence |
| 146 | + // const canvas2 = document.getElementById('output2'); |
| 147 | + // canvas2.width = six2.width; |
| 148 | + // canvas2.height = six2.height; |
| 149 | + // const ctx2 = canvas2.getContext('2d'); |
| 150 | + // const target2 = ctx.getImageData(0, 0, six2.width, six2.height); |
| 151 | + // six2.toPixelData(target2.data, six2.width, six2.height); |
| 152 | + // ctx2.putImageData(target2, 0, 0); |
| 153 | + //} |
103 | 154 | } |
104 | 155 |
|
105 | 156 | function hexColorToRGB(color) { |
106 | 157 | const value = parseInt(color.slice(1), 16); |
107 | | - console.log(); |
108 | 158 | return [ |
109 | 159 | (value >> 16) & 0xFF, |
110 | 160 | (value >> 8) & 0xFF, |
|
132 | 182 | } else { |
133 | 183 | const response = await fetch('/testfiles/' + s); |
134 | 184 | const bytes = new Uint8Array(await response.arrayBuffer()); |
| 185 | + decodeWasm(bytes); |
135 | 186 | start = new Date(); |
136 | 187 | if (document.getElementById('slow').checked) { |
137 | 188 | let localHandle = drawHandle = setInterval(() => drawImage(img), 100); |
|
0 commit comments