一键掌握：道客巴巴文档高效下载全攻略，无需积分轻松获取学习资料

半城之北

已于 2024-03-30 12:16:28 修改

阅读量5.6k

点赞数 19

文章标签：前端 html javascript 经验分享

于 2024-03-11 22:40:32 首次发布

本文链接：https://blog.csdn.net/2301_77470034/article/details/136636576

版权

本文介绍了如何使用HTML5的CanvasAPI中的toDataURL()和toBlob()方法，实现从Canvas元素中获取和下载图像数据。通过这两个方法，开发者可以将Canvas内容转换为dataURI或Blob对象，进而实现图片的自动下载。文中提供了详细的代码示例和下载页面范围的实现方法。

摘要由CSDN通过智能技术生成

一、使用方法

二、 toDataURL() 方法

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("所有页面已下载完毕");
}