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

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

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

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

优化,转换为pdf

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.mzph.cn/bicheng/50484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Window下CLion实现本机通过socket通信-C++

1.引言-什么是socket socket即套接字&#xff0c;用于描述地址和端口&#xff0c;是一个通信链的句柄。应用程序通过socket向网络发出请求或者回应。 sockets(套接字)编程有三种&#xff0c;流式套接字&#xff08;SOCK_STREAM&#xff09;&#xff0c;数据报套接字&#xff…

go语言开发Prometheus Exporter(DM数据库)

一、介绍 源码步骤基于dameng_exporter源码讲解&#xff0c;看完本篇文章可以直接进行二次开发。 dameng exporter的开源地址&#xff1a;https://github.com/gy297879328/dameng_exporter&#xff08;可直接对接prometheusgrafana 提供表盘&#xff09; 开发一个exporter 其…

Linux中的三类读写函数

文件IO和标准IO的区别 遵循标准&#xff1a; 文件IO遵循POSIX标准&#xff0c;主要在类UNIX环境下使用。标准IO遵循ANSI标准&#xff0c;具有更好的可移植性&#xff0c;可以在不同的操作系统上重新编译后运行。可移植性&#xff1a; 文件IO的可移植性相对较差&#xff0c;因为…

基于大模型零代码1小时完成国标数据分级分类近义词库构建及思考

1. 任务背景及困难分析 因项目要求&#xff0c;需要对国家标准国民经济行业分类-GB/T 4754-2017【1】进行近义词库的构建&#xff0c;时间非常紧&#xff0c;只给了很短时间进行处理&#xff0c;目标是构建一份中等粒度的行业近义词库。 搁在以前&#xff0c;可能需要点时…

<设计模式> 单例模式

单例模式 模式介绍&#xff1a;保证一个类仅有一个实例&#xff0c;并提供一个全局访问点来获取这个唯一的实例。主要解决&#xff1a;一个全局使用的类频繁地创建与销毁。关键代码&#xff1a;构造函数是私有的。 应用场景 数据库连接池&#xff1a;数据库连接是一种宝贵的…

Netty的源码分析和业务场景

Netty 是一个高性能、异步事件驱动的网络应用框架&#xff0c;它基于 Java NIO 构建&#xff0c;广泛应用于互联网、大数据、游戏开发、通信行业等多个领域。以下是对 Netty 的源码分析、业务场景的详细介绍&#xff1a; 源码概述 Netty 的核心组件&#xff1a;Netty 的架构设…

Linux 安装mysql-client-core-8.0

在Linux上安装mysql-client-core-8.0 安装流程 下面是安装mysql-client-core-8.0的步骤和相应的命令&#xff1a; 步骤1&#xff1a;更新系统软件源 我们首先需要更新系统的软件源&#xff0c;以确保我们能够获取到最新的软件包列表。使用以下命令更新软件源&#xff1a; …

Ansible——inventory 主机清单

1、inventory 含义 Inventory支持对主机进行分组&#xff0c;每个组内可以定义多个主机&#xff0c;每个主机都可以定义在任何一个或多个主机组内。 如果是名称类似的主机&#xff0c;可以使用列表的方式标识各个主机。 vim /etc/ansible/hosts [webservers] 192.168.20.11:222…

平凯星辰亮相 2024 中国国际金融展,发布银行交易明细查询白皮书

7 月 19 日至 21 日&#xff0c;备受瞩目的 2024 中国国际金融展&#xff08;以下简称金融展&#xff09;在北京国家会议中心隆重举办。作为中国乃至亚洲最大的金融科技展会&#xff0c;本届金融展以“数字金融引领未来&#xff0c;守正创新共筑金融新生态”为主题&#xff0c;…

vue单页面 全屏 使用 screenfull 实现全屏(左侧菜单栏隐藏)

vue单页面 全屏 使用 screenfull 实现全屏&#xff08;左侧菜单栏隐藏&#xff09;_vue在打开一个界面的时候隐藏侧边栏-CSDN博客

C++_单例模式

目录 1、饿汉方式实现单例 2、懒汉方式实现单例 3、单例模式的总结 结语 前言&#xff1a; 在C中有许多设计模式&#xff0c;单例模式就是其中的一种&#xff0c;该模式主要针对类而设计&#xff0c;确保在一个进程下该类只能实例化出一个对象&#xff0c;因此名为单例。而…

temu数据分析怎么做,temu选品数据分析怎么做

在竞争激烈的电商市场中&#xff0c;数据分析已成为商家提升销售业绩、优化经营策略的重要工具。特别是对于Temu平台的卖家而言&#xff0c;掌握数据分析技巧&#xff0c;特别是选品数据分析&#xff0c;更是至关重要。本文将为您详细解析如何在Temu平台上进行数据分析&#xf…

Docker 安全及日志管理(包含SSL证书)

目录 一、Docker 存在的安全问题 二、Docker 架构缺陷与安全机制 三、Docker 安全基线标准 四、容器相关的常用安全配置方法 五、限制流量流向 六、镜像安全 七、DockerClient 端与 DockerDaemon 的通信安全 https的单向认证流程 https的双向认证流程 八、DockerClie…

子组件不能直接改变父组件传递的“道具”值

引言&#xff1a; 不少人在刚开始使用vue时都会遇到一个报错——Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the props value.&#xff08;避免直接改…

Ubuntu 22.04.4 LTS (linux) GoAccess 分析 Nginx 日志

1 安装goaccess sudo apt-get update sudo apt-get install goaccess 2 控制台运行 goaccess -a -d -f /usr/local/openresty/nginx/logs/access.log -p /etc/goaccess/goaccess.conf #sudo vim /etc/goaccess/goaccess.conf time-format %H:%M:%S date-format %d/%b…

iOS ------ Block的相关问题

Block的定义 Block可以截获局部变量的匿名函数&#xff0c; 是将函数及其执行上下文封装起来的对象。 Block的实现 通过Clang将以下的OC代码转化为C代码 // Clang xcrun -sdk iphoneos clang -arch arm64 -rewrite-objc main.m//main.m #import <Foundation/Foundation.…

3.2、数据结构-数组、矩阵和广义表

数组结构 数组是定长线性表在维度上的扩展,即线性表中的元素又是一个线性表。N维数组是一种“同构”的数据结构,其每个数据元素类型相同、结构一致。 一个m行n列的数组表示如下: 其可以表示为行向量形式&#xff08;一行一行的数据&#xff09;或者列向量形式&#xff08;一…

前端开发使用Big.js精算避免误差

1、下载 npm install big.js 全局引入还是局部引入可根据项目框架及个人需求 2、静态引入 < script src https://unpkg.com/big.js6.0.0/big.mjs > </ script > 或者 import Big from https://raw.githubusercontent.com/mikemcl/big.js/v6.0.0/big.mjs; i…

Nginx 怎样处理请求的故障转移?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 Nginx 怎样处理请求的故障转移&#xff1f;一、理解故障转移的重要性二、Nginx 中的故障检测机制三、Nginx 中的请求分配策略四、Nginx 中的故障转移实现方式五、…

Shell脚本编程(一)

目录 一、Shell命令行的书写规则 二、编写/修改权限及执行shell程序的步骤 1、编写简单Shell程序 2、建立可执行程序 3、执行Shell程序 4、实例 三、Shell程序中使用参数 1、位置参数 2、内部参数 3、实例一 4、实例二 一、Shell命令行的书写规则 在执行Shell命令时…