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;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【考研数学】准备开强化,更「张宇」还是「武忠祥」?

数一125学长前来回答,选择哪位老师的课程,这通常取决于你的个人偏好和学习风格! 张宇老师和武忠祥老师都是非常有经验的数学老师,他们的教学方法各有特点。 张宇老师的教学风格通常被认为是通俗易懂,善于将复杂的概念…

x264 帧类型代价计算原理:slicetype_mb_cost 函数分析

slicetype_mb_cost 函数 函数功能 计算每个宏块 MB 的代价 cost。函数参数分析 x264_t *h:全局编码结构体x264_mb_analysis_t *a:宏块分析结构体x264_frame_t **frames:系列帧数据结构体int p0:帧序号之一,一般指向靠前帧int p1:帧序号之一,一般指向靠后帧int b:帧标志…

《系统架构设计师教程(第2版)》第4章-信息安全技术基础知识-02-信息加密技术

文章目录 1. 信息加密技术1.1 数据加密1.2 对称密钥加密算法1)数据加密标准(DES)2)三重DES(Triple-DES)3)国际数据加密算法(IDEA)4)高级加密标准(AES&#xf…

【C -> Cpp】由C迈向Cpp (6):静态、友元和内部类

标题:【C -> Cpp】由C迈向Cpp (6):静态、友元和内部类 水墨不写bug (图片来源于网络) 目录 (一)静态成员 (二)友元 (三&#xff09…

Zynq UltraScale+ RFSoC 配置存储器器件

Zynq UltraScale RFSoC 配置存储器器件 下表所示闪存器件支持通过 Vivado 软件对 Zynq UltraScale RFSoC 器件执行擦除、空白检查、编程和验证等配置操 作。 本附录中的表格所列赛灵思系列非易失性存储器将不断保持更新 , 并支持通过 Vivado 软件对其中所列…

扭亏为盈的赛力斯,真正进入稳态了吗?

“72小时内大定破1万台”。5月15日,问界新M5开启全国大规模交付,从当前取得的成绩来看,赛力斯的“富贵”似乎还将延续。 其实,此前基于问界新M7等车型的爆火,赛力斯已经找到了创收轨道。财报显示,2024年一…

无代码无国界:我们正在走向软件安全的狂野西部吗?

我们使用的几乎所有东西都是基于代码构建的,从汽车到智能冰箱再到门铃。在企业中,无数的应用程序保持设备、工作流程和操作的运行。因此,当早期的无代码开发平台于 2010 年推出时,承诺为公民开发人员提供更易于访问的应用程序开发…

用友GRP-U8 bx_dj_check.jsp SQL注入漏洞复现(XVE-2024-10537)

0x01 免责声明 请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,作者不为此承担任何责任。工具来自网络,安全性自测,如有侵权请联系删…

【2024华为HCIP831 | 高级网络工程师之路】刷题日记(18)

个人名片:🪪 🐼作者简介:一名大三在校生,喜欢AI编程🎋 🐻‍❄️个人主页🥇:落798. 🐼个人WeChat:hmmwx53 🕊️系列专栏:&a…

动态手势识别(VGG11)

学校的大作业要做一个视频图像处理相关的,就做了动态手势识别 VGG代码 import torch import torch.nn as nnclass VGG_11_3D(nn.Module):def __init__(self, num_classes, pretrainedFalse):super(VGG_11_3D, self).__init__()self.conv1 nn.Conv3d(3, 64, kernel…

labelimg删除用不到的标签(yolo格式)以及 下载使用

问题:当我们标注完成新的类别后后直接删除classes.txt中不需要的类别之后再次打开labelimg会闪退,如何删除不需要的标签并且能够正确运行呢?(yolo格式) 原因:当我们打开labelimg进行标注的时候&#xff0c…

JumpServer堡垒机简单式部署与管理(v3.10.8) 上

目录 一. 环境准备 1.1 关闭防火墙 1.2 永久关闭SEliunx 1.3 重启虚拟机让seliunx文件生效 1.4 配置阿里源镜像 二. 安装部署 2.1 上传压缩包到虚拟机(v3.10.8) 2.2 解压 2.3 一键安装部署 2.4 安装完成界面 2.5 启动 2.6 浏览器访问IP 2.7 使…

“图生视频”技术创新:剪贴画秒变动画生成的实验验证与分析

在最近的研究进展中,AniClipart系统的问世标志着文本到视频生成技术的一个重要里程碑。这一系统由香港城市大学和莫纳什大学的研究者们共同开发,旨在解决将静态剪贴画图像根据文本提示自动转换成动画序列的挑战。传统的动画制作流程繁琐且耗时&#xff0…

基于物联网的教室人数检测系统-设计说明书

设计摘要: 本设计基于物联网技术,实现了一个教室人数检测系统。系统利用STM32单片机作为中控,通过红外对管检测人员进出教室,并实时统计应到人数和实到人数,同时使用OLED显示屏显示相关信息。系统还通过温湿度传感器检…

掌握Linux常用命令,扫平面试需求障碍

cd 切换目录。 > cd ../ #切换到父级目录 > cd /tmp # 切换到/tmp目录 > cd ~ # 切换到当前用户的家目录 ls命令 查看文件与目录的命令,list 的缩写。 > ls -l #列出长数据串,包含文件的属性与权限数据等 > ls -a #列出隐藏…

script标签以及defer和async属性

1. <script>标签 将JavaScript代码嵌入到HTML中主要方式是使用<script>元素。 使用<script>的方式有两种&#xff1a; &#xff08;1&#xff09;直接在网页中嵌入JavaScript代码&#xff1a; <script>function sayHi() {console.log("Hi"…

FreeRTOS【6】线程优先级

1.开发背景 基于上一篇指引&#xff0c;已经了解了线程的阻塞&#xff0c;这个篇章主要介绍线程优先级的影响 2.开发需求 设计实验验证高优先级会抢占低优先级线程 CPU 3.开发环境 window10 MDK STM32F429 FreeRTOS10.3.1 4.实现步骤 1&#xff09;创建测试线程&#xff…

Rust构造JSON和解析JSON

目录 一、Rust构造JSON和解析JSON 二、知识点 serde_json JSON 一、Rust构造JSON和解析JSON 添加依赖项 cargo add serde-json 代码&#xff1a; use serde_json::{Result, Value};fn main() -> Result<()>{//构造json结构 cpu_loadlet data r#"{"…

Django Rest Framework 全局异常处理

在Django Rest Framework&#xff08;DRF&#xff09;中&#xff0c;全局异常处理是一种重要的机制&#xff0c;它可以帮助我们更好地管理API中的异常情况&#xff0c;并返回统一的错误响应。本文将详细介绍两种全局异常处理的方法&#xff1a;使用中间件&#xff08;Middlewar…

Jenkins 忘记登录密码怎么办

在安装Jenkins中遇到忘记登录密码该怎么呢&#xff1f;下面是一个解决办法 1. 先停止jenkins服务 我是用tomcat启动的jenkis 2. 找到config.yaml文件 find / -name config.xml命令执行后找到如下结果&#xff1a; /root/.jenkins/config.xml /root/.jenkins/users/admin_839…