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

注意:有些网站可能由于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");
    });
相关推荐
百事老饼干3 分钟前
Java[面试题]-真实面试
java·开发语言·面试
理想不理想v23 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我24 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记37 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜37 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=38 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧40 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck42 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
白子寰1 小时前
【C++打怪之路Lv14】- “多态“篇
开发语言·c++
王俊山IT1 小时前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习