相關視頻：Converting a HTML canvas to a PNG file
打開網頁后，打開【開發者工具】，
- 在html中的任意位置添加一個按鈕元素：
<button id="save">Save</button>
- 把網頁盡可能地放大（使保存的圖片盡可能清晰），然后找到要保存的canvas元素，向里面添加一個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()
網頁就會彈出一個保存圖片的視窗，就可以保存圖片了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305335.html
標籤：其他
下一篇：TensorFlow 從入門到精通（9）—— 模型保存與恢復以及TensorFlow游樂場、Tensorboard