如何制作保持当前CSS样式的画布屏幕截图？ -Angular / javascript

Question

我想对以下画布进行截图：

<div class="A">
    <canvas width="700" height="500" style="filter: brightness(200%)"></canvas>
<div class="A">

我有以下方法：

    takeSnapshot() {
    const canvas = document.getElementsByClassName('A')[0].childNodes[0] as HTMLCanvasElement;
    console.log(canvas);
    const dataUrl = canvas.toDataURL('png');
    const link = document.getElementsByClassName('link')[0];
    link.setAttribute('download', 'snapshot-' + this.convertTimeStamp(Date.now()) + '.png');
    link.setAttribute('href', dataUrl.replace('image/png', 'image/octet-stream'));
    link.click();
  }

但是样式style="filter: brightness(200%)"并未保留在png下载的图像上。我该怎么办？

Answer 1

过滤画布像素