jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ui: fix canvas manager rendering q (#2339)

Browse source
This commit is contained in:
Delirium 2024-07-02 17:32:58 +02:00 • committed by GitHub
parent 8b585af366
commit c2e3764e92
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/app/player/web/managers/CanvasManager.ts
View file

@ -155,13 +155,16 @@ export default class CanvasManager extends ListWalker<Timestamp> {
if (node && node.node) {
const canvasCtx = (node.node as HTMLCanvasElement).getContext('2d');
const canvasEl = node.node as HTMLVideoElement;
canvasCtx?.drawImage(
this.snapImage,
0,
0,
canvasEl.width,
canvasEl.height
);
requestAnimationFrame(() => {
canvasCtx?.clearRect(0, 0, canvasEl.width, canvasEl.height);
canvasCtx?.drawImage(
this.snapImage,
0,
0,
canvasEl.width,
canvasEl.height
);
})
this.debugCanvas
?.getContext('2d')
?.drawImage(this.snapImage, 0, 0, 300, 200);

25
tracker/tracker/src/main/app/canvas.ts
View file

@ -191,6 +191,7 @@ function captureSnapshot(
if (!ctx) {
return ''
}
ctx.clearRect(0, 0, dummy.width, dummy.height)
ctx.drawImage(canvas, 0, 0, dummy.width, dummy.height)
dummy.toBlob(onBlob, imageFormat, qualityInt[quality])
} else {
@ -198,6 +199,18 @@ function captureSnapshot(
}
}
function saveImageData(imageDataBlob: Blob, name: string) {
const imageDataUrl = URL.createObjectURL(imageDataBlob)
const link = document.createElement('a')
link.href = imageDataUrl
link.download = name
link.style.display = 'none'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
function dataUrlToBlob(dataUrl: string): [Blob, Uint8Array] | null {
const [header, base64] = dataUrl.split(',')
if (!header || !base64) return null
@ -215,16 +228,4 @@ function dataUrlToBlob(dataUrl: string): [Blob, Uint8Array] | null {
return [new Blob([u8arr], { type: mime }), u8arr]
}
function saveImageData(imageDataBlob: Blob, name: string) {
const imageDataUrl = URL.createObjectURL(imageDataBlob)
const link = document.createElement('a')
link.href = imageDataUrl
link.download = name
link.style.display = 'none'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
export default CanvasRecorder