link.click()时浏览器报错The file at ‘data:image/png;base64,iVBORw

代码如下:

const dataURL = canvas.toDataURL({format: "png",width: 400,height: 400,
});const link = document.createElement("a");
link.download = new Date().getTime();link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

结果虽然文件是下下来了,但是浏览器出现以下报错
在这里插入图片描述


解决方法,改成

const dataURL = canvas.toDataURL({format: "png",width: 400,height: 400,
});const link = document.createElement("a");let blob = dataURLtoBlob(dataURL);
let url = URL.createObjectURL(blob);link.download = new Date().getTime();link.href = url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);// 将Base64字符串转换为Blob对象
function dataURLtoBlob(dataurl) {var arr = dataurl.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while(n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type:mime});
}

简言之,就是把
link.href = dataURL;改成
let blob = dataURLtoBlob(dataURL);
let url = URL.createObjectURL(blob);
link.href = url;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/13089.shtml

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

相关文章

IT行业的现状与未来发展趋势

方向一:技术革新与行业应用 随着科技的日新月异,IT行业已成为全球经济增长和社会进步的重要引擎。从云计算、大数据、人工智能到物联网、5G通信和区块链,这些前沿技术正以前所未有的速度重塑我们的生活和工作方式。以下是我对IT行业现状及未来…

高压无源探头能测整流桥电压吗?

高压无源探头是用于测量高电压电路中信号的一种工具,它不需要外部电源供电。然而,对于测量整流桥电压,需要考虑几个因素以确定是否可以使用高压无源探头。 首先,让我们了解一下整流桥的基本原理。整流桥是一种电路,用…

MyBatis的一二级缓存区别

MyBatis的一级缓存和二级缓存之间存在以下主要区别: 缓存级别与作用域: 一级缓存:也称为SqlSession级别的缓存,与数据库会话(SqlSession对象)绑定,并且默认开启。一级缓存的作用域仅限于同一个…

STM32--HC-SR501 热释电人体红外感应模块

实物引脚图: 模块工作特性: 当人进入感应范围之后输出引脚输出高电平,人离开感应范围自动延时输出低电平 热释电效应: 热释电传感器,也称为人体红外传感器,其工作原理基于热释电效应。这种传感器由几个关…

Rust中使用Rocket框架返回html网页,返回一个基于 Handlebars (HBS) 模板的响应

在Rust中使用Rocket框架返回网页,通常涉及创建一个路由,该路由将返回一个HTML页面。Rocket是一个快速、易用且可扩展的Web框架,它允许你以一种简洁的方式定义路由和处理请求。 一、使用Rocket框架返回一个简单的HTML页面: 添加依…

手机怎么下载别人直播间视频

手机下载直播视频,您需要按照以下步骤进行操作: 1. 打开直播平台,获取正在直播的链接,就是直播间的地址,然后粘贴在直接视频解析工具里,就可以同步下载直播视频画面。 2. 获取直播视频解析工具方法&#…

项目管理-案例重点知识(成本管理)

项目管理:每天进步一点点~ 活到老,学到老 ヾ(◍∇◍)ノ゙ 何时学习都不晚,加油 三、成本管理 案例重点 成本管理 案例重点内容: (1)成本管理计划内容 (2)估算…

pcdn边缘云常见sla有哪些?如何避免被白嫖

PCDN(Point-to-Point Content Delivery Network)边缘云常见的SLA(Service Level Agreement)规则包括高峰期离线、服务时间、重传延时、限速等。这些规则是为了保证服务质量和用户体验。下面将详细解释这些规则,并提供一…

ANSYS Maxwell16 引导

Maxwell 使用 下载 https://download.csdn.net/download/wangjun_huster/89313272 安装 https://www.52txr.cn/2022/MaxwellInstall.html 入门

渗透相关面试+流量分析

文章目录 简单自我介绍上一个工作的主要内容Hvv的分组和流程你在hvv/攻防演练中取得了哪些成绩? 二、渗透相关面试题基础端口号以及入侵方式OSI七层协议响应状态码都有哪些?**WAF和IPS的区别**盲注是什么?java内存马类型**内存马有几种类型**…

2024最新大厂C++面试真题合集,大厂面试百日冲刺 bay11

CSIG 腾讯后台 new和malloc区别 "new"是C的一个操作符,它在创建对象时会自动调用构造函数。"malloc"是C语言的函数,仅仅分配内存。"new"返回的是对象类型的指针,类型与对象的类型保持一致,无需类…

谷歌全力反击 OpenAI:Google I/O 2024 揭晓 AI 新篇章,一场激动人心的技术盛宴

🚀 谷歌全力反击 OpenAI:Google I/O 2024 揭晓 AI 新篇章,一场激动人心的技术盛宴! 在这个人工智能的全新时代,只有谷歌能让你眼前一亮!来自全球瞩目的 Google I/O 2024 开发者大会,谷歌用一场…

Vue 之 后台管理系统的权限路由的管理

目录 前言实现理解三者的概念以及之间的关联账号(用户)角色菜单 用户权限授权相关概念实现代码实现登录跳转路由,路由守卫中进行权限验证按钮权限封装指令:调用(其中一个页面参考) 思路,操作流程…

学习java第七十一天

DI:依赖注入 依赖注入是spring容器中创建对象时给其设置依赖对象的方式,比如给spring一个清单,清单中列出了需要创建B对象以及其他的一些对象(可能包含了B类型中需要依赖对象),此时spring在创建B对象的时候…

探索 pinia-plugin-persistedstate:为 Pinia 状态持久化助力

在使用 Pinia 进行状态管理时,我们常常希望某些重要的状态能够持久化保存,以便在应用重新启动或不同会话中保持数据的连续性。这时候,pinia-plugin-persistedstate 就派上了大用场。 首先,我们当然需要安装这个插件: …

数学:矩阵范数的定义、常见的矩阵范数

1 算子范数【从属范数】 1.1 1-算子范数【列和范数】 :即对A的每列的绝对值求和再求其中的最大值 1.2 ∞-算子范数【行和范数】即对 A 的每行的绝对值求和再求其中的最大值 1.3 2-算子范数【谱范数】 学过奇异值分解就知道谱范数是最大奇异值/ 二次型的最大特…

力扣刷题day01

前期准备: 熟练掌握一门编程语言(Java,C,python)掌握数据结构与算法算法通关手册python 重学C 编程指北C 学C之前要学C语言,重点掌握指针和内存

大数据Spark教程从入门到精通第四篇:Spark快速上手

一:Spark快速上手 1:创建Maven项目 idea安装scala_idea scala插件-CSDN博客 代表了我们安装scala的maven环境已经准备好了,代码可以正常跑了

Redis分布式锁【简单版】

文章目录 概要例子1【SETNX EXPIRE】例子2【 Redisson 】 概要 redis分布式锁六种方案 SETNX EXPIRE 方案: 描述:使用Redis的SETNX命令来尝试设置一个键值对,如果该键不存在,则设置成功并设置过期时间,实现锁的功能…

Git使用(4):分支管理

一、新建分支 首先选择Git -> Branches... 然后选择 New Branch,输入新分支名称,例如dev。 可以看到右下角显示已经切换到新建的dev分支了。 push到远程仓库,可以看到新添加的分支。 二、切换分支与合并分支 为了演示合并分支&#xff0c…