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,一经查实,立即删除!

相关文章

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

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

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)规则包括高峰期离线、服务时间、重传延时、限速等。这些规则是为了保证服务质量和用户体验。下面将详细解释这些规则,并提供一…

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

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

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

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

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

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

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

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

Git使用(4):分支管理

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

【MySQL数据库开发设计规范】之SQL使用规范

欢迎点开这篇文章,自我介绍一下哈,本人姑苏老陈 ,是一名JAVA开发老兵。 本文收录于 《MySQL数据库开发设计规范》专栏中,该专栏主要分享一些关于MySQL数据库开发设计相关的技术规范文章,定期更新,欢迎关注&…

Shell之高效文本处理命令

目录 一、排序命令—sort 基本语法 常用选项 二、去重命令—uniq 基本语法 常用选项 三、替换命令—tr 基本语法: 常用选项 四、裁剪命令—cut 基本语法: 常用选项 字符串分片 五、拆分命令—split 基本语法: 六、 文件…

NVM安装及VUE创建项目的N种方式

VUE 参考官网:https://cli.vuejs.org/zh/guide/ 目录 NVM安装 1.卸载node.js 2.安装nvm ​编辑​ 3.配置 4.使用nvm安装node.js 5.nvm常用命令 创建VUE项目 1.使用vue init 创建vue2(不推荐) 2.使用vue create创建vue2和3&#xff…

TINA 使用教程

常用功能 分析-电气规则检查:短路,断路等分析- 直流分析 交流分析 瞬态分析 视图-分离曲线 由于输出的容性负载导致的振荡 增加5欧电阻后OK 横扫参数 添加横扫曲线的电阻,选择R3:8K-20K PWL和WAV文件的支持 示例一:…

AWS简介

AWS AWS,全称为Amazon Web Services,是亚马逊公司旗下的云计算服务平台,自2006年起向全球用户提供广泛而深入的云计算服务。AWS是全球最全面、应用最广泛的云平台之一,它从全球的数据中心提供超过200项功能齐全的服务&#xff0c…

防泄密软件有哪些|2024年企业防泄密软件排行榜

在当今数字化时代,企业的信息安全问题愈发显得重要,尤其是随着网络技术的飞速发展,信息泄露和数据窃取的风险也日益增大。为了保障企业的核心机密和客户隐私,许多企业开始使用防泄密软件,以确保信息的安全性和完整性。…

【Linux 网络】网络基础(二)(应用层协议:HTTP、HTTPS)-- 详解

我们程序员写的一个个解决我们实际问题,满足我们日常需求的网络程序,都是在应用层。 前面写的套接字接口都是传输层经过对 UDP 和 TCP 数据发送能力的包装,以文件的形式呈现给我们,让我们可以进行应用层编程。换而言之&#xff0c…

MP3解码入门(基于libhelix)

主要参考资料: 【Arduino Linux】基于 Helix 解码库实现 MP3 音频播放: https://blog.csdn.net/weixin_42258222/article/details/122640413 libhelix-mp3: https://github.com/ultraembedded/libhelix-mp3/tree/master 目录 一、MP3文件二、MP3 解码库三、libhelix-mp3库3.1 …

Shell之(数组)

目录 一、shell数组 1.数组的定义 2.定义数组的方法 第一种 第二种 第三种 第四种 3.数组分片 4. 数组字符替换 临时替换 永久替换 5.删除数组 删除指定的下标 删除整组 6.数组遍历和重新定义 7.数组追加元素 方式一:指定位置添加 方法二&a…