前端实现base64编码图片的导出、图片添加描述文字导出

1. base64编码图片的导出

调用handleDownload方法,传入图片的base64编码,将图片进行导出保存:

// base64 转换blob对象
const base64ToBlob = (base64: string) => {
  // 将Base64编码的字符串按';base64,''拆分,得到内容类型和二进制数据两部分
  const parts = base64.split(';base64,');
  const contentType = parts[0].split(':')[1];
  // 将二进制数据转换为UTF-8编码的字符串
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  // 创建一个Uint8Array对象,将字符串中的每个字符码存储到这个数组中
  const uInt8Array = new Uint8Array(rawLength);

  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
// 使用Blob对象的构造函数创建一个新的Blob对象,将Uint8Array作为参数传递,并设置内容类型。
  return new Blob([uInt8Array], { type: contentType });
}
// 保存二维码
const handleDownload = (base64:string) => {
  // 将图片从base64转换为blob对象
  const blob = base64ToBlob(base64);
  // 创建一个URL对象,用于存储blob对象
  const url = URL.createObjectURL(blob);
  // 创建一个a标签,用于下载文件
  const link = document.createElement('a');
  // 设置a标签的href属性,为url对象
  link.href = url;
  // 设置a标签的download属性,为要下载的文件名
  link.download = 'downloaded.png'; // 指定下载文件的名称
  // 将a标签添加到body中
  document.body.appendChild(link);
  // 点击a标签,触发下载
  link.click();
  // 销毁URL对象
  URL.revokeObjectURL(url);
  // 从body中移除a标签
  document.body.removeChild(link);
}

2. 图片添加描述文字导出


// 绘制图片与描述文字
function exportImageWithDescription(base64Image: string, desc: string, fileName?: string) {
  // 创建临时Canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 创建图像对象并加载Base64编码图片
  const image = new Image();
  image.onload = function () {
    // 设置Canvas尺寸与图像尺寸一致
    canvas.width = image.width;
    canvas.height = image.height;

    // 在Canvas上绘制图像
    ctx.drawImage(image, 0, 0);

    // 添加自定义描述文字
    ctx.font = "20px Arial";
    ctx.fillStyle = "black";
    ctx.fillText(desc, 20, canvas.height - 20);

    // 将Canvas内容导出为PNG图片
    const dataURL = canvas.toDataURL('image/png');

    // 创建一个下载链接并模拟点击下载
    const a = document.createElement('a');
    a.href = dataURL;
    a.download = `${fileName || 'downloaded'}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  // 加载Base64编码的图片
  image.src = base64Image;
}

MDN上关于Data URL的介绍
MDN上关于base64的介绍

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

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

相关文章

系统性文献综述的撰写(Systematic Review)

文献综述 什么是文献综述 对某一个“领域、专业、课题、问题、研究专题”&#xff0c;通过搜集大量的相关资料&#xff08;别人发表的论文&#xff09;&#xff0c;然后通过“阅读、分析、归纳、整理”给出最新进展、学术见解或建议。对其做出综合性介绍和阐述的一种学术论文…

基于SpringBoot和PostGIS的各省与地级市空间距离分析

目录 前言 一、PostGIS时空库 1、时空表设计 2、空间数据管理与查询 二、后台接口设计 1、ORM层设计与实现 2、业务层设计与实现 3、控制层设计 三、web可视化设计与实现 1、省份范围展示 2、城市距离可视化 3、成果展示 总结 前言 在上一篇博客中基于Java和GDAL实…

力扣HOT100 - 78. 子集

解题思路&#xff1a; class Solution {public List<List<Integer>> subsets(int[] nums) {List<List<Integer>> lists new ArrayList<>(); // 解集lists.add(new ArrayList<Integer>()); // 首先将空集加入解集中for(int i 0; i < n…

【nginx】http2 配置造成 多进程请求变成单进程

一、环境简要说明 #访问请求过程 用户&#xff08;浏览器&#xff09; ——> 防火墙映射 ——> nginx ——> app服务&#xff08;java&#xff09; http2是什么&#xff0c;简单来说是继HTTP1.1版本之后的新版HTTP协议&#xff0c;支持二进制分帧、多路复用、首部压缩…

认识Linux及一些基本

目录 linux简介&#xff1a; 1. 发展史 UNIX发展的历史 Linux发展历史 2. 开源 3. 企业应用现状 Linux在服务器领域的发展 Linux在桌面领域的发展 Linux在移动嵌入式领域的发展 Linux在云计算/大数据领域的发展 4. 发行版本 Debian Ubuntu 红帽企业级Linux Cent…

数据结构复习指导之数组和特殊矩阵

文章目录 数组和特殊矩阵 考纲内容 复习提示 前言 1.数组的定义 2.数组的存储结构 3.特殊矩阵的压缩存储 3.1对称矩阵 3.2三角矩阵 3.3三对角矩阵 4.稀疏矩阵 5.知识回顾 数组和特殊矩阵 考纲内容 &#xff08;一&#xff09;栈和队列的基本概念 &#xff08;二&a…

ubuntu neo4j 下载与配置(一)

neo4j 官方下载页面 https://neo4j.com/deployment-center/#community 进入页面之后&#xff0c;往下滑 咱们在下载neo4j时&#xff0c;官方可能要咱们填写一下个人信息&#xff0c;比如&#xff1a;姓名组织结构邮箱等&#xff1a; 咱们可以观察一下&#xff0c;ne4j的下载链…

iOS 实现类似抖音翻页滚动效果

这里是效果图 参考抖音的滚动效果&#xff0c;需要我们在结束拖动的时候&#xff0c;动画设置偏移量 这里有一个注意点&#xff0c;由于我们是在拖动结束的时候&#xff0c;手动改变tableview的偏移量&#xff0c; 改变了tableView 自身原有的的滚动效果&#xff0c;所以我们…

C++奇迹之旅:类和对象const成员static关键字友元内部类

文章目录 &#x1f4dd;const成员&#x1f320; const 成员函数是什么&#xff1f;&#x1f320; 取地址及const取地址操作符重载 &#x1f309;static成员&#x1f320;概念&#x1f320;static特性&#x1f309;static小题 &#x1f320;友元&#x1f309; 友元函数&#x1f…

npm安装时一直idealTree:npm: sill idealTree buildDeps卡住不动

npm安装时一直idealTree:npm: sill idealTree buildDeps卡住不动 解决步骤&#xff1a; 1.去以下的目录中删掉.npmrc文件&#xff08;只在C:\User.npmrc&#xff09; 2.清除缓存&#xff0c;使用npm cache verify 不要用npm cache clean --force&#xff0c;容易出现npm WAR…

国产AI大模型加速“上车”

上海白领刘先生&#xff0c;坐上他的汽车主驾&#xff0c;向右扭头说&#xff1a;“打开那窗户。”话音刚落&#xff0c;副驾驶的车窗自动开了。 这辆车搭载了基于国产AI大模型的智能系统&#xff0c;就像有了人的大脑和神经网络&#xff0c;通过学习提升语音、视觉等多模态感…

VCSA6.7重置root密码

VCSA6.7重置root密码 1、登录VCSA所运行的ESXI主机 2、打开VCSA虚拟机Web控制台&#xff0c;先拍摄一个快照&#xff0c;然后重启虚拟机&#xff0c;在如下界面按"e" 3、找到linux开头的段落&#xff0c;在末尾追加rw init/bin/bash; 4、输入完成后&#xff0c;按&…

《异常检测——从经典算法到深度学习》27 可执行且可解释的在线服务系统中重复故障定位方法

《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …

溪谷软件:游戏联运有多简单?

游戏联运&#xff0c;即游戏联合运营&#xff0c;是一种游戏运营模式&#xff0c;涉及到多个平台或公司共同推广和运营同一款游戏。对于开发者而言&#xff0c;游戏联运的简化程度可能因具体情况而异&#xff0c;但以下是一些因素&#xff0c;使得游戏联运在某种程度上变得更加…

J9inceptionv3

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊# 前言 上周学习了inceptionv1网络&#xff0c;这周学习其改进版本inceptionv3 简介 Inception v3是谷歌研究团队提出的深度卷积神经网络架构&#xff0c;通过…

Docker-compose 简单介绍

目录 一 Docker-compose与 Docker Swarm 1&#xff0c;docker-compose 出现的意义 2&#xff0c; Docker Compose 是什么 3&#xff0c;Docker Swarm 是什么 3&#xff0c;Docker Compose Docker Swarm 主要区别 二 Docker-compose 简介 1&#xff0…

鸿蒙开发接口Ability框架:【@ohos.ability.dataUriUtils (DataUriUtils模块)】

DataUriUtils模块 DataUriUtils模块提供用于处理使用DataAbilityHelper方案的对象的实用程序类的能力&#xff0c;包括获取&#xff0c;添加&#xff0c;更新给定uri的路径组件末尾的ID。 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#x…

windows ubuntu sed,awk,grep篇,8,Awk 语法和基础命令

目录 51.Awk 命令语法 52.Awk 程序结构(BEGIN,body,END)区域 53.打印命令 54.模式匹配 Awk 是一个维护和处理文本数据文件的强大语言。在文本数据有一定的格式&#xff0c;即每行数据包 含多个以分界符分隔的字段时&#xff0c;显得尤其有用。即便是输入文件没有一定的格式&a…

在使用ChatGPT之前,你真的知道这些吗?|TodayAI

当OpenAI在2022年11月发布ChatGPT时&#xff0c;它标志着技术领域的一次重大突破。ChatGPT是一个高级AI聊天机器人&#xff0c;它的功能几乎令人难以置信。过去的AI技术多年来一直在逐步发展&#xff0c;早期版本通常只能生成毫无意义的文本或质量较差的图片。这些早期的尝试虽…

安装 AngularJS

安装 AngularJS 文章目录 安装 AngularJS1. 使用在线 cdn2. 使用依赖管理工具 npm 1. 使用在线 cdn <!-- 1. 引入在线地址 --> <script src"http://code.angularjs.org/1.2.25/angular.min.js"></script><!-- 2. 下载到本地&#xff0c;引入文…