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

news2024/11/24 1:19:33

代码如下:

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.coloradmin.cn/o/1679217.html

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

相关文章

webpack优化构建速度示例-合理配置loader的include exclude:

实际上,babel-loader 在 Webpack 配置中默认并不包含 exclude 和 include 选项的默认值,通常,为了优化构建性能,开发者会显式地设置 exclude 和 include 选项,以便 babel-loader 只处理必要的文件。 src/index.js impo…

【漏洞复现】Secnet-智能路由系统弱口令

0x01 产品简介 Secnet安网智能AC管理系统是广州安网通信技术有限公司(简称“安网通信”)的无线AP管理系统 0x02 漏洞描述 攻击者可直接利用弱口令登录系统 0x03 搜索语法 fofa: title"安网-智能路由系统" || title"智能路由系统" || title"安网科…

做海外问卷调查有什么方法技巧?

大家好,我是橙河老师,很久没更新文章了,一方面是比较忙,另一方面是觉得关于项目介绍的文章,写的也差不多了。 后面的文章,还是着重讲解不同渠道的特点、做题技巧、人设创建这些实战性的内容。 我不像其他公…

有什么操作简单的副业或兼职呢?

以下是操作简单的副业或兼职 1. 网络兼职 可以在网上找一些兼职工作,如网络营销、客服、文案撰写等,只需要有一台电脑和网络连接即可。 2. 手机任务 可以用手机做做致米宝库的任务,一天有一百多块钱,还可以电脑学习项目资源&am…

PCIE协议-2-事务层规范-Virtual Channel (VC) Mechanism

2.5 虚拟通道(VC)机制 虚拟通道(VC)机制提供了对可以在整个结构中传输使用TC(流量类别)标签区分的流量的支持。VC的基础是独立的结构资源(队列/缓冲区及其相关的控制逻辑)。这些资源…

异步I/O库-libuv介绍

1.简介 libuv是一个跨平台的支持事件驱动的异步I/O的库,使开发者可以以非阻塞的方式执行文件I/O操作、网络通信、子进程管理等。 libuv的主要特点包括: 事件循环:libuv有一个基于事件循环的模型,它不断地轮询事件,并…

VC++ 6.0开发文件重复整理工具开发

开发背景:手机上的文件越来越多,想要备份下文件结果文件太多杂乱无章且重复文件冗余存储造成存储空间滥发,所以决定开发一个小工具来整理重复文件。由于本人电脑运行慢,选择VC6.0作为开发IDE,操作虽然麻烦点&#xff0…

【记录】docker笔记(五):Docker网络-Network Namespace

Docker 网络理论基础 要了解docker网络,先了解如下基础概念。 Network Namespace Docker 网络的底层原理是 Linux 的 Network Namespace ,所以对于 Linux Network Namespace 的理解对 Docker 网络底层原理的理解非常重要。 简介 Network Name…

java技术:nacos

目录 一、docker安装 1、创建一个nacos 2、复制配置信息出来(方便修改配置文件) 3、删除nacos 4、修改配置文件(主要是一下几个) 6、创建数据库 nacos 7、重启nacos mysql 一、docker安装 1、创建一个nacos docker run …

添砖Java之路(其七)——static

目录 static: 1.被类的所有对象所共享(和c有点像) 2.多了一种调用方法,可以通过类名调用 3.随着类的加载而加载,是优先于对象的存在。 工具类: 为什么主类的方法要加static: 理解 public static void main&#…

你还在手动加好友?试试这款神器,释放双手自动添加!

你还在手动添加微信好友吗?尤其是在忙碌的时候,手动加好友不仅费时又很容易出错。试试这个自动添加好友神器——个微管理系统,释放你的双手,轻松拓展好友列表! 1、多号同时登录在线 系统支持多个微信号同时登录在线&…

USB-OTG:1、OTG原理介绍

目录 🍅点击这里查看所有博文 随着自己工作的进行,接触到的技术栈也越来越多。给我一个很直观的感受就是,某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了,只有经常会用到的东西才有可能真正记…

运维别卷系列 - 云原生监控平台 之 05.prometheus alertManager 实践

文章目录 [toc]Alertmanager 简介Alertmanager 实现的核心概念GroupingInhibitionSilencesClient behaviorHigh Availability Alertmanager 配置文件globaltemplatesrouteinhibit_rulesreceivers Alertmanager 部署创建 cm创建 svc创建 stsPrometheus 配置告警Prometheus 配置文…

010.理解异步性

异步消息传递是响应式系统的一个关键特性。但到底是什么异步性,为什么它对响应式应用程序如此重要?我们的人生注定在许多异步任务中。你可能没有意识到,但你的日常活动如果它们本质上不是异步的,那就太烦人了。要理解什么是异步,…

评价决策类-层次分析法

师从江北 问题引出 归一化处理:指标的数组[a b c]归一化处理得到[a/(abc),b/(abc),c/(abc)] 因为每个指标的重要性不同,所以要加上一个权重 如何科学的确定权重,就要用到层次分析法(AHP) 模型原理 建立递阶层次结构模…

利用一下Chat-GPT写两段处理字符串的简单样例ABAP程序。这样可以大大提高工作效率。Chat-GPT的能力真是让人震撼。

我让Caht-GPT写两段ABAP 程序,第一段程序要求如下: 判读字符串里面是否含有特殊字符,这里说的特殊字符不包括键盘上能够输入的字符,如果有这样的特殊字符则输出来。 DATA: lv_string TYPE string VALUE 你的字符串,lv_result TYP…

数据结构——二叉树知识点详解!

引言:本篇博客将详细介绍到数据结构中的又一位大将——二叉树。它也是我们目前学到的第一个非线性的数据结构。并且本章将学到的概念居多,希望大家可以理解并牢记。 更多有关C语言和数据结构知识详解可前往个人主页:计信猫 目录 一&#xff0…

node.js的Express框架的介绍 与 安装详细教程

一、Express框架介绍 (1)Express定义: Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 &#xff08…

微信小程序快速开发-基础内容(内容真的又多又干货)

目录 实现横向布局效果 实现滚动效果 实现轮播图效果 实现文本长按选中复制效果 渲染 HTML 标签 按钮组件的使用效果 图片组件的使用效果 Mustache 语法 动态绑定内容(定义变量,渲染变量) 动态绑定属性(将属性定义为变量…

2024年中国国际厨卫家居展览会(上海KIB厨卫展)

中国国际厨卫家居博览会(KIB)由中国五金制品协会、中国国际贸易促进委员会轻工行业分会、北京奥维云网大数据科技股份有限公司主办。从最初的“中国国际橱柜、厨房卫浴产品与技术博览会(CIKB)”,到2001年与中国国际五金展&#xf…