【技术支持】canvas转换为图片或PDF保存电脑

news/2024/9/8 18:51:06 标签: 前端, javascript, 开发语言

注意:有些网站可能由于canvas跨域污染问题,无法使用toBlob,所以无法转换

开发者工具中,选中需要转换的canvas元素(使其可以使用$0语法)
控制台输入如下代码

javascript"> $0.toBlob(function (blob) {
    var link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "image.png";
    link.click();
  }, "image/png");

优化,转换为pdf

javascript">fetch("https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js")
    .then((response) => response.text())
    .then((scriptText) => {
      eval(scriptText);//执行脚本
      // 现在可以使用 jsPDF 了
      const pageList = document.querySelectorAll("canvas");

      const { jsPDF } = window.jspdf;

      async function convertCanvasToPDF(pageList, pdfFileName) {
        const pdf = new jsPDF();

        for (let i = 0; i < pageList.length; i++) {
          const canvas = pageList[i];
          if (canvas) {
            const imgData = canvas.toDataURL("image/png");
            if (i > 0) {
              pdf.addPage(); // 在不是第一页的情况下添加新页面
            }
            pdf.addImage(imgData, "PNG", 0, 0, 210, 290);
          }
        }
        pdf.save(pdfFileName);
      }
      // 使用示例
      convertCanvasToPDF(pageList, "output.pdf");
    });

http://www.niftyadmin.cn/n/5575457.html

相关文章

2024第三届钉钉杯大学生大数据挑战赛【A题】完整分享

2024第三届钉钉杯大学生大数据挑战赛已经开赛&#xff0c;小编给大家带来非常实用的助力【A题】完整&#xff0c;&#xff08;看图片下方的说明&#xff09;&#xff0c;资料预览&#xff1a; 微信公众号

在window将Redis注册为服务

将redis注册为系统服务&#xff0c;开启自启动 安装服务 默认注册完之后会自动启动&#xff0c;在window中的服务看一下&#xff0c;如果启动类型为自动&#xff0c;状态是自动运行则启动完成。如果是手动&#xff0c;需要右键属性调整为自动&#xff0c;在点击启动&#xff0c…

【.NET 6 实战--孢子记账--从单体到微服务】--需求分析

一、简述 在本节&#xff0c;我会带领大家对计划开发的应用 孢子记账 进行需求分析。 需求分析是软件开发过程中的关键步骤&#xff0c;旨在明确和记录用户及系统的需求。其目的是将用户的期望转化为具体的、可实现的软件需求&#xff0c;以确保最终产品能够满足用户的需求和期…

界面控件Telerik UI for WPF 2024 Q2亮点 - 全新的AIPrompt组件

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visual Studio…

【数据结构】链表和数组有啥区别?

链表这家伙&#xff0c;就像一列火车&#xff0c;一节一节的车厢就是链表的节点。每节车厢&#xff08;节点&#xff09;都有自己的“身份证”&#xff08;数据&#xff09;和“联系方式”&#xff08;指针&#xff09;&#xff0c;指向下一节车厢&#xff08;节点&#xff09;…

智能编程,一触即发:使用AIGC优化CSS——提升前端开发效率与质量

文章目录 一、AIGC在CSS优化中的应用场景智能代码生成自动布局调整性能优化建议样式和色彩建议 二、使用AIGC优化CSS的具体步骤明确需求选择AIGC工具输入描述或设计稿审查和调整集成和测试 三、AIGC优化CSS的优势与挑战优势&#xff1a;挑战&#xff1a; 《CSS创意项目实践&…

【Linux】Xshell安装-截图版详细教程

Xshell的安装 1.打开文件 2.点击【下一步】 3.安装类型 选择【免费为家庭/学校】&#xff0c;点击【下一步】 4.许可证协议 选择接受许可协议 5.选择目的地位置 点击【浏览】&#xff0c;安装到D盘&#xff0c;路径&#xff1a;【D:\xshell】 6.选择程序文件夹 点击【下一…

Spark实时(四):Strctured Streaming简单应用

文章目录 Strctured Streaming简单应用 一、Output Modes输出模式 二、Streaming Table API 三、​​​​​​​​​​​​​​Triggers 1、​​​​​​​unspecified&#xff08;默认模式&#xff09; 2、​​​​​​​​​​​​​​Fixed interval micro-batches&am…