将网页中的canvas保存为本地的图片

相关视频：Converting a HTML canvas to a PNG file

打开网页后，打开【开发者工具】。

1. 在html中的任意位置添加一个id为”save”的按钮元素：

<button id="save">Save</button>

2. 把网页尽可能地放大（使保存的图片尽可能清晰），然后找到要保存的canvas元素，向里面添加一个叫“xxxxx”的id。例如，原来的canva元素为：

<canvas width="3875" height="4335" aria-label="页码 4" style="width: 22299px; height: 24937px; transform: rotate(0deg) scale(1, 1);"></canvas>

添加了一个叫“xxxxx”的id后：

<canvas width="3875" height="4335" aria-label="页码 4" style="width: 22299px; height: 24937px; transform: rotate(0deg) scale(1, 1);" id="xxxxx"></canvas>

3. 到控制台下运行如下代码：

const gCanvas = document.querySelector('#xxxxx');

function onSave() {
  gCanvas.toBlob((blob) => {
    const timestamp = Date.now().toString();
    const a = document.createElement('a');
    document.body.append(a);
    a.download = `${timestamp}.png`;
    a.href = URL.createObjectURL(blob);
    a.click();
    a.remove();
  });
}

document.querySelector('#save').addEventListener('click', onSave);

4. 最后在控制台运行如下代码：

document.getElementById("save").click()

网页就会弹出一个保存图片的窗口，就可以保存图片了。