小技巧|将网页中的canvas保存为本地的图片
相关视频：Converting a HTML canvas to a PNG file
打开网页后，打开【开发者工具】。
- 在html中的任意位置添加一个按钮元素：
- 把网页尽可能地放大（使保存的图片尽可能清晰），然后找到要保存的canvas元素，向里面添加一个id。例如，原来的canva元素为：
添加了一个叫“xxxxx”的id后：
- 到控制台下运行如下代码：
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 = https://www.it610.com/article/URL.createObjectURL(blob);
a.click();
a.remove();
});
}document.querySelector('#save').addEventListener('click', onSave);
- 最后在控制台运行如下代码：
document.getElementById("save").click()
【小技巧|将网页中的canvas保存为本地的图片】网页就会弹出一个保存图片的窗口，就可以保存图片了。
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 即将到手三百万
- 【译】20个更有效地使用谷歌搜索的技巧
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记