76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<div class="hash-badge">
|
|
<canvas ref="canvas" :width="width" height="3" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, ref } from "vue";
|
|
|
|
const BADGE_HEIGHT = 3;
|
|
|
|
export default defineComponent({
|
|
name: "HashBadge",
|
|
props: {
|
|
address: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const canvas = ref<HTMLCanvasElement | undefined>(undefined);
|
|
const width = ref(0);
|
|
|
|
const bytes = [...props.address].map((c) => c.charCodeAt(0));
|
|
while (bytes.length % (3 * BADGE_HEIGHT) !== 0) {
|
|
bytes.push(bytes[bytes.length - 1]);
|
|
}
|
|
|
|
width.value = Math.ceil(bytes.length / 3 / BADGE_HEIGHT);
|
|
|
|
onMounted(() => {
|
|
const ctx = canvas.value?.getContext("2d");
|
|
if (!ctx) {
|
|
console.warn("Couldn't initialize canvas!");
|
|
return;
|
|
}
|
|
|
|
let idx = 0;
|
|
while (bytes.length > 0) {
|
|
const tmp = [];
|
|
while (bytes.length > 0 && tmp.length < 3) {
|
|
tmp.push(bytes.shift());
|
|
}
|
|
while (tmp.length < 3) {
|
|
tmp.push(tmp[tmp.length - 1]);
|
|
}
|
|
|
|
const r = (tmp[0]! / 128) * 255;
|
|
const g = (tmp[1]! / 128) * 255;
|
|
const b = (tmp[2]! / 128) * 255;
|
|
ctx.fillStyle = `rgb(${r},${g},${b})`;
|
|
ctx.fillRect(Math.floor(idx / BADGE_HEIGHT), idx % BADGE_HEIGHT, 1, 1);
|
|
idx++;
|
|
}
|
|
});
|
|
|
|
return {
|
|
canvas,
|
|
width,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hash-badge {
|
|
display: inline-block;
|
|
height: 1em;
|
|
}
|
|
|
|
.hash-badge canvas {
|
|
height: 100%;
|
|
image-rendering: optimizeSpeed;
|
|
}
|
|
</style>
|