79 lines
No EOL
2.4 KiB
Vue
79 lines
No EOL
2.4 KiB
Vue
<template>
|
|
<canvas ref="waveform">
|
|
</canvas>
|
|
</template>
|
|
|
|
<script>
|
|
// import util from "../../plugins/utils";
|
|
|
|
export default {
|
|
props: {
|
|
event: {
|
|
type: Object,
|
|
default: function () {
|
|
return null;
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
mounted() {
|
|
this.drawWaveform(this.event);
|
|
},
|
|
methods: {
|
|
drawWaveform(event) {
|
|
const canvas = this.$refs.waveform;
|
|
if (canvas) {
|
|
const dpr = window.devicePixelRatio || 1;
|
|
canvas.width = canvas.offsetWidth * dpr;
|
|
canvas.height = (canvas.offsetHeight) * dpr;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const base64content = event ? event.getContent().formatted_body : undefined;
|
|
if (base64content) {
|
|
const data = atob(base64content).split('').map(function (c) { return c.charCodeAt(0); });
|
|
|
|
const drawLineSegment = (ctx, x, y0, data) => {
|
|
ctx.lineWidth = 1; // how thick the line is
|
|
ctx.strokeStyle = "#000"; // what color our line is
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y0 - data);
|
|
ctx.lineTo(x, y0 + data);
|
|
ctx.stroke();
|
|
};
|
|
|
|
console.log("W", canvas.width, canvas.height, canvas.offsetWidth, canvas.offsetHeight);
|
|
|
|
const width = canvas.width;
|
|
const height = canvas.height;
|
|
const samples = data.length;
|
|
for (let i = 0; i < width; i++) {
|
|
if (i % 4 == 2 || i % 4 == 3) continue;
|
|
const iSample = Math.floor(width == 0 ? 0 :(1000 * i) / width);
|
|
const sample = iSample < samples ? data[iSample] : 0;
|
|
drawLineSegment(ctx, i, height/2, (sample / 255) * height / 2);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
event: {
|
|
immediate: false,
|
|
handler(event) {
|
|
this.drawWaveform(event);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@/assets/css/chat.scss";
|
|
</style> |