相关视频:Converting a HTML canvas to a PNG file
打开网页后,打开【开发者工具】。
- 在html中的任意位置添加一个id为"save"的按钮元素:
<button id="save">Save</button>
- 把网页尽可能地放大(使保存的图片尽可能清晰),然后找到要保存的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>
- 到控制台下运行如下代码:
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);
- 最后在控制台运行如下代码:
document.getElementById("save").click()
网页就会弹出一个保存图片的窗口,就可以保存图片了。