-
Notifications
You must be signed in to change notification settings - Fork 1
/
tab-portrait.vue
129 lines (114 loc) · 3.33 KB
/
tab-portrait.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
<div class="my-wrapper-block">
<div class="d-flex flex-column align-center">
<div class="subtitle-1 modt my-subtitle mt-5 my-3">
Advanced <a href="https://d3js.org/">d3js</a> - Straight from this
<a href="https://observablehq.com/@oscar6echo">ObservableHQ</a>
<a href="https://observablehq.com/@mbostock/voronoi-stippling"
>notebook</a
>
</div>
<div class="d-flex flex-column align-center">
<canvas id="my-canvas"></canvas>
</div>
</div>
</div>
</template>
<script>
import Worker from '~/js/workers//voronoi.worker.js';
export default {
name: 'TabkWiki',
components: {},
props: {
filename: { type: String, required: true }
},
data() {
return {
width: 650
};
},
computed: {},
async mounted() {
const image = await this.getImage();
const { data, width, height } = this.getData(image, this.width);
const canvas = document.getElementById('my-canvas');
canvas.width = width;
canvas.height = height;
canvas.classList.add('with-border');
const ctx = canvas.getContext('2d');
// const worker = new Worker(this.$router.options.base + 'worker/voronoi.js');
const worker = new Worker();
const displayPoints = ({ data: points }) => {
console.log('start displayPoints');
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, width, height);
ctx.beginPath();
for (let i = 0, n = points.length; i < n; i += 2) {
const x = points[i];
const y = points[i + 1];
ctx.moveTo(x + 1.5, y);
ctx.arc(x, y, 1.5, 0, 2 * Math.PI);
}
ctx.fillStyle = '#000';
ctx.fill();
};
const n = Math.round((width * height) / 40);
worker.addEventListener('message', displayPoints);
worker.postMessage({ data, width, height, n });
},
methods: {
getImage() {
let uri = process.env.CDN_HOST;
if (process.env.CDN_PORT) uri += ':' + process.env.CDN_PORT;
uri += process.env.CDN_PREFIX + '/' + this.filename;
return new Promise((resolve, reject) => {
const i = new Image();
if (
new URL(uri, document.baseURI).origin !== new URL(location).origin
) {
i.crossOrigin = 'anonymous';
}
i.onload = () => resolve(i);
i.onerror = () =>
reject(new Error(`Unable to load file: ${this.name}`));
i.src = uri;
});
},
getData(image, width) {
const height = Math.round(width * (image.height / image.width));
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(
image,
0,
0,
image.width,
image.height,
0,
0,
width,
height
);
// console.log(ctx);
const { data: rgba } = ctx.getImageData(0, 0, width, height);
const data = new Float64Array(width * height);
for (let i = 0, n = rgba.length / 4; i < n; ++i)
data[i] = Math.max(0, 1 - rgba[i * 4] / 254);
console.log('data.length', data.length);
return { data, width, height };
}
}
};
</script>
<style lang="scss" scoped>
.my-wrapper-block {
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
}
.with-border {
border: 1px solid $grey-border;
}
</style>