mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-04-12 12:20:22 +00:00
65 lines
No EOL
1.8 KiB
HTML
65 lines
No EOL
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
|
|
<style type="text/css">
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script type="text/javascript">
|
|
// Following this idea: https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
|
|
var chartSize = 1000;
|
|
var dataSize = 1000;
|
|
|
|
var dataset = d3.range(dataSize).map(function (d, i) {
|
|
return d3.range(dataSize).map(function (d, i) {
|
|
return ~~(Math.random() * 255);
|
|
});
|
|
});
|
|
|
|
var canvas = d3.select('body')
|
|
.append('canvas')
|
|
.style({
|
|
position: 'absolute',
|
|
width: chartSize + 'px',
|
|
height: chartSize + 'px'
|
|
})
|
|
.attr({
|
|
width: dataSize,
|
|
height: dataSize
|
|
})
|
|
.node();
|
|
|
|
var canvasWidth = canvas.width;
|
|
var canvasHeight = canvas.height;
|
|
var ctx = canvas.getContext('2d');
|
|
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
|
|
|
|
var buf = new ArrayBuffer(imageData.data.length);
|
|
var buf8 = new Uint8ClampedArray(buf);
|
|
var data = new Uint32Array(buf);
|
|
for (var y = 0; y < canvasHeight; ++y) {
|
|
for (var x = 0; x < canvasWidth; ++x) {
|
|
var value = dataset[y][x];
|
|
|
|
console.log(value)
|
|
data[y * canvasWidth + x] =
|
|
(255 << 24) | // alpha
|
|
(value << 16) | // blue
|
|
(value << 8) | // green
|
|
value; // red
|
|
}
|
|
}
|
|
|
|
imageData.data.set(buf8);
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |