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

相关视频：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()

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

将网页中的canvas保存为本地的图片相关推荐

python保存变量_将python 中的变量保存到本地
如何将python中的变量保存在本地? 将python 的一些代码保存在本地, 特别是一些需要大量运算的结果,例如机器学习里面的模型,,放在本地,还是比较好用的.下次就可以直接拿出来使用就好. 其实 ...
将Outlook中的邮件保存到本地磁盘，释放邮箱空间
将Outlook中的邮件保存到本地磁盘,释放邮箱空间由于我们公司用的是Exchange服务,每位同事的邮箱空间只有200MB,然而他们因业务的需要需经常收发大量的邮件,而导致邮箱爆满,需经常删邮件, ...
网页中的表格保存为EXCEL表格，打印网页中的表格
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
canvas保存到本地图片三种方法
canvas保存到本地图片三种方法 canvas保存本地图片第一种方法(修改图片的媒体类型,window.open直接下载) 第二种方法(创建a标签,通过自己触发点击来下载) 第三种方法(将图片数据 ...
android中调用系统功能来显示本地相册图片拍照视频音频功能
android中调用系统功能来显示本地相册图片拍照视频音频功能效果图如下: 本地相册跟拍照可直接调用系统功能 Intent img = new Intent(MediaStore.ACTIO ...
在网页中插入一个透明背景的PNG图片
在网页中插入一个透明背景的PNG图片,可是在显示的时候,它的背景就成灰色了.这是IE的bug.需要加入以下代码: <script language="jscript"> ...
dw php用文本框更新记录,用dreamweaver htm的网页一个输入框一个按钮点按钮将输入框中的内容保存到本地肿么写...
这个功能在html页面中是可以实现的,核心就是用ajax技术. html核心代码保存到本地 function savecontent(){ var content = $('textarea[nam ...
8.0强行转换后变成了7_如何将网页转换为 PDF，保存在本地备用？
2T遇到一个问题,一些网页上的资料 ,需要离线保存下来备用,但各类剪藏工具又不能很完整的抓取完整网页,于是想起能不能转换为 PDF 保存. 注意,这是2T搜索了大概7-8款在线工具之后,挑选了一款各方 ...
fabricJs中给canvas添加跨域背景图片报错Tainted canvases may not be exported
最近几期我想分享一下我的项目中使用vue+fabric.js过程中遇到的坑. 就比如给canvas加背景时,就会出现跨域的报错提示. 我用的是vue-element相关框架,在此不多做赘述,后面再出专 ...

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

将网页中的canvas保存为本地的图片相关推荐

最新文章

热门文章