目录
HTMLCanvasElement: toDataURL() method
HTMLCanvasElement: toBlob() method
一、 使用方法
在浏览器里按F12,唤出开发者工具栏,控制台内粘贴代码并运行。
二、 toDataURL()
方法
HTMLCanvasElement: toDataURL() method
toDataURL()
是 HTMLCanvasElement 接口中的一项功能方法,它允许开发者获取 Canvas 元素当前渲染内容的一个数据URI表示形式。调用该方法后,Canvas 将其所绘内容转化为指定格式(通常是图像格式,如 PNG、JPEG 等)的数据,并以 base64 编码的形式嵌入在一个data:
URL 中返回。
代码的说明
函数
downloadCanvas(start, end)
实现了一个自动下载指定范围内Canvas元素内容为PNG格式图片的功能。该函数接收两个整数参数:起始页码start
和结束页码end
,用于确定需要下载哪些Canvas页面的内容。在循环体内,函数首先通过传入的页码动态构建Canvas元素ID,然后获取对应的DOM元素。如果找到该Canvas元素,则将其内容转化为PNG格式的Data URL。
接下来,创建一个
img
元素并将Canvas内容作为其源,将图片立即显示在文档body中。随后,创建一个a
标签作为下载链接,设置其href
属性为Canvas内容的Data URL,这样可以确保链接指向正确的图片数据。进一步地,设定下载链接的目标文件名,格式为
Page-页码.png
。设置链接的显示文本,包含具体的页码信息以便用户识别。最后,将下载链接添加至文档body,并模拟点击该链接触发浏览器的下载行为。如此一来,在调用如
downloadCanvas(1, 5)
时,将会把编号1至5的Canvas页面内容分别保存为独立的PNG图片文件。
代码的具体实现
function downloadCanvas(start, end) {
for (let i = start; i <= end; i++) {
const canvasElementId = `page_${i}`;
const canvasElement = document.getElementById(canvasElementId);
if (canvasElement) {
const imageDataUrl = canvasElement.toDataURL("image/png");
let imgElement = document.createElement('img');
imgElement.src = imageDataUrl;
document.body.appendChild(imgElement);
let downloadLink = document.createElement('a');
downloadLink.href = imageDataUrl;
downloadLink.download = `Page-${i}.png`;
downloadLink.textContent = `下载第${i}页PNG图像`;
document.body.appendChild(downloadLink);
downloadLink.click();
}
}
}
调用示例
downloadCanvas(1, 5);
三、 toBlob()
方法
HTMLCanvasElement: toBlob() method
toBlob()
是 HTMLCanvasElement 接口提供的一个方法,它用于将 Canvas 元素当前的图像内容转换为一个 Blob 对象。Blob 对象代表不可变的、原始数据的类文件对象,可以用来创建或读取二进制数据,例如图片、文档等。在 Canvas 上绘制完图形或加载了外部图像后,调用
toBlob()
方法将会以指定的 MIME 类型(如'image/png'
或'image/jpeg'
)生成一个 Blob 数据,并通过回调函数处理这个 Blob 对象。由于toBlob()
方法是异步执行的,所以需要传递一个回调函数来接收生成的 Blob 数据。
代码的说明
功能概述:
downloadPages
是一个异步JavaScript函数,用于批量下载指定范围内的HTML Canvas元素内容为PNG图片。该函数接受两个整数参数,分别为起始页码和结束页码,按照此范围内的页码顺序依次下载每一页Canvas内容。使用方法: 在网页环境中调用
downloadPages(startPage, endPage)
函数,其中startPage
为起始下载页码,endPage
为结束下载页码。例如,downloadPages(1, 10)
表示下载从第1页至第10页的Canvas元素内容。内部实现流程:
- 遍历指定页码范围,查找相应ID(如
page_1
至page_10
)的Canvas元素。- 对于每个存在的Canvas元素,将其内容转换为Blob对象,以便创建可下载的图像数据。
- 创建一个隐藏的
<a>
标签,设置其download
属性为对应的文件名(如page_1.png
),并将Blob URL赋值给href
属性。- 插入DOM树中模拟点击下载链接,触发浏览器的下载行为。
- 下载完成后立即将该链接从DOM中移除,并释放Blob URL占用的内存资源。
- 使用Promise管理每个页面的下载过程,并通过
Promise.all
等待所有页面下载完成。- 在所有页面下载结束后,控制台输出“所有页面已下载完毕”。
注意事项: 确保调用该函数前,页面上已经正确加载了具有相应ID的Canvas元素,否则无法下载对应页码的内容。
代码的具体实现
async function downloadPages(startPage, endPage) {
const pagePromises = [];
for (let currentPage = startPage; currentPage <= endPage; currentPage++) {
const canvasElement = document.getElementById(`page_${currentPage}`);
if (!canvasElement) {
console.warn(`未找到ID为 "page_${currentPage}" 的Canvas元素`);
continue;
}
console.log(`开始处理第${currentPage}页`);
const downloadPagePromise = new Promise((resolve) => {
canvasElement.toBlob(blob => {
if (!blob) {
resolve();
return;
}
const downloadLink = document.createElement('a');
downloadLink.download = `page_${currentPage}.png`;
downloadLink.href = URL.createObjectURL(blob);
downloadLink.style.display = 'none';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadLink.href);
resolve();
});
});
pagePromises.push(downloadPagePromise);
}
await Promise.all(pagePromises);
console.log("所有页面已下载完毕");
}
调用示例
downloadPages(1, 10);
四、 参考博文
doc88文档下载方法 - 古道轻风 - 博客园https://www.cnblogs.com/88223100/p/doc88_download.html
doc88文档下载方法-CSDN博客https://sqlora.blog.csdn.net/article/details/126533138