Vue实现Base64转png、jpg

news2024/9/30 7:24:39

method中写两个方法:

    1. 根据base64转图片的方法
    1. 根据转换出blob格式的文件导出的方法
//base64转png
    base64ImgtoFile(dataurl, filename = 'file') {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    },
    //图片下载
    downloadBlob(blob, filename) {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(url);
    }

传入base64的图片全路径,在合适的位置分别调用这两个方法,即可实现下载

    var base64Img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABAFJREFU
..........................DlzUWu+L9NALAI4D+JOIkszc5PuWNABcBbAbwGGt9ewmAFLKJ5n5s5iXEhZCvBQEgQ3YEdd1p4UQR9PpdH11dXWRmV8motPJZPJgIpH4bWVl5dDw8PAR3/ftE2B9BuzX6Ojo/kajYZvp/i5vhAYRXbBPs3YTdcuYlPIuZj7tOM4r2+n+vx6nPdR/x1T/Aau20TA//wiSAAAAAElFTkSuQmCC';
    var imgFile = this.base64ImgtoFile(base64Img);
    this.downloadBlob(imgFile, 'test.png')

在这里插入图片描述

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

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

相关文章

Windows安装postgresql数据库图文教程

数据库使用排行榜:https://db-engines.com/en/ranking 目录 一、软件简介 二、软件下载 三、安装教程 四、启动教程 一、软件简介 PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统(ORDBMS),是以加州大学计…

Python采集二手房源数据信息并做可视化展示

目录标题 前言环境使用:模块使用:python技术实现: <基本流程步骤>代码展示尾语 前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 环境使用: Python 3.8 jupyter --> pip install jupyter notebook pycharm 也可以 模块使用: requests >>> pip instal…

【MySQL 数据查询】:提高查询的效率

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL数据查询的讲解&#xff08;基本、分组、排序、聚合、分页、条件查询&#xff09; 目录 前言一、基本查询二、条件查询三、聚合函数(统计函数)四、分组查询五、排序查询五、分页查询六、总结 一、基本查询 MySQ…

2020年CSP-J认证 CCF非专业级别软件能力认证第一轮真题--阅读程序题

2020 CCF认证第一轮&#xff08;CSP-J&#xff09;真题 二、阅读程序题 (程序输入不超过数组或字符串定义的范围&#xff0c;判断题正确填√错误填X;除特殊说明外&#xff0c;判断题 1.5分&#xff0c;选择题3分&#xff0c;共计4 分) 第一题 01 #include <cstdlib> …

Java调优

Java调优 Java 性能调优不像是学一门编程语言&#xff0c;无法通过直线式的思维来掌握和应用&#xff0c;它对于工程师的技术广度和深度都有着较高的要求。 互联网时代&#xff0c;一个简单的系统就囊括了应用程序、数据库、容器、操作系统、网络等技术&#xff0c;线上一旦出…

【深度学习】GPT-1

GPT-1是OpenAI在《Improving Language Understanding by Generative Pre-Training》中于2018年提出的生成式预训练语言模型。 1.GPT-1 简介 在自然语言处理任务中&#xff0c;存在大量无标签的语料数据&#xff0c;而有标签的语料数据相对较少&#xff0c;因此基于有监督训练的…

[建议收藏] Mysql+ETLCloud CDC+Doris实时数仓同步实战

一、业务需求及其痛点 随着数字化转型&#xff0c;企业需要对各种销售及营销数据进行实时同步分析&#xff0c;例如销售订单信息&#xff0c;库存信息&#xff0c;会员信息&#xff0c;设备状态信息等等&#xff0c;这些统计分析信息可以实时同步到 Doris中进行分析和统计&…

搜索跳出率:了解并优化用户体验

&#x1f482; 个人网站:【海拥】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 目录 前言什么是搜索跳出率&…

【Linux编辑器-vim使用】

目录 Linux编辑器-vim使用1.vim的基本概念2.vim的基本操作3.vim正常模式命令集4.vim末行模式命令集 Linux编辑器-vim使用 1.vim的基本概念 目前了解的vim有三种模式&#xff08;其实有好多模式&#xff09;&#xff0c;分别是命令模式、插入模式和底行模式&#xff0c;各模式…

Midjourney如何用参考图/垫图来绘画图

大家都知道AI绘画工具每次生成的效果都是随机的&#xff0c;但是现在很多AI绘图工具都提供了利用参考图/垫图的方式出图&#xff0c;这样就可以让让AI画作生成自己想要的布局、场景、色彩等等。 国内的AI绘图工具一般都好操作&#xff0c;国外主流的Midjourney也可以添加参考图…

ChatGPT/GPT-4 或将从根本上改变软件工程

文章目录 一、前言二、主要内容 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 编程也可能是最容易被 AI 技术取代的工作之一&#xff0c;软件的构建方式将产生根本性的转变。 今年以来&#xff0c;相信大家都听说过 ChatGPT、New Bing 和…

8.5 字节序及IP地址转换

目录 主机字节序和网络字节序 什么是字节序&#xff1f; 字节序转换函数 IP地址字节序转换函数 主机字节序和网络字节序 什么是字节序&#xff1f; 字节序是指多字节数据在计算机内存中存储或者网络传输时各字节的存储顺序&#xff0c;分为&#xff1a; 大端字节序 (Big …

药物 3D 打印新突破:圣地亚哥大学用机器学习筛选喷墨打印生物墨水,准确率高达 97.22%

内容一览&#xff1a;药物喷墨打印是一种高度灵活和智能化的制药方式。据相关报告统计&#xff0c;该领域市场规模将在不久的未来呈现指数级增长。过往&#xff0c;筛选合适生物墨水的方法费时且费力&#xff0c;因此也成为药物喷墨打印领域面临的主要挑战之一。为解决这一问题…

开启你的时间序列分析之旅:一步步教你学会HyperTS

目录 前言一、HyperTS介绍二、HyperTS安装、使用2-1、安装2-2、HyperTS使用 三、案例3-0、通用工作流程3-1、时间序列预测3-2、时间序列分类3-3、时间序列异常检测 四、高级应用4-1、模型的保存和加载 总结 前言 HyperTS是一个开源的时间序列分析库&#xff0c;主要用于处理和分…

K8S 云集群安装纯享版 - 傻瓜式一键教程 全自动脚本文件

引言&#xff1a; 用的云服务器&#xff0c;整个过程读者还是需要准备些软妹币的… 另外众所周知&#xff0c;K8S最难的部分是什么&#xff1f;——是安装。。。 目录 0. 技术选型( :bell: 重要&#xff01;)0.0 version0.1 云服务器 1. 容器运行时2. k8s 安装前准备2.0 网络连…

【计算机视觉】CVPR 2023 上的分割论文真的是神仙打架(介绍前12篇,图像分割,全景分割,语义分割,实例分割)

文章目录 一、图像分割类1.1 AutoFocusFormer: Image Segmentation off the Grid1.2 FreeSeg: Unified, Universal and Open-Vocabulary Image Segmentation1.3 Parameter Efficient Local Implicit Image Function Network for Face Segmentation 二、全景分割类2.1 You Only …

CUDA介绍

CUDA introduction 文章目录 CUDA introduction异构计算架构典型的CUDA程序的执行流程函数类型限定词Kernel 线程层次结构线程ID号计算&#xff1a; Example加法实例托管内存乘法 性能分析工具 Nsight System功能用法 Reference欢迎关注公众号【三戒纪元】 异构计算架构 GPU并…

SIFT算法简介

参考资料 SIFT文献-David-UBC&#xff1a; 《Distinctive Image Features from Scale-Invariant Keypoints》SIFT算法介绍&#xff1a; SIFT特征详解 - Brook_icv - 博客园 (cnblogs.com) 简介 Scale-invariant feature transform 尺度不变特征变换 SIFT算法不仅只有尺度不…

腾讯安全杨光夫:企业需改变“头痛医头”现状,构建持续进化的安全免疫力

6月13日&#xff0c;腾讯安全联合IDC发布“数字安全免疫力”模型框架&#xff0c;主张将守护企业数据和数字业务两大资产作为企业安全建设的核心目标。腾讯安全副总裁杨光夫在《助力企业持续进化安全免疫力》的主题演讲中表示&#xff0c;在新业态、新威胁、新场景、强监管下&a…

【MySQL】MVCC是如何解决快照读下的幻读问题的

文章目录 LBCC当前读 MVCC隐藏列undo logRead View 总结 我们从上文中了解到InnoDB默认的事务隔离级别是repeatable read&#xff08;后文中用简称RR&#xff09;&#xff0c;它为了解决该隔离级别下的幻读的并发问题&#xff0c;提出了LBCC和MVCC两种方案。其中LBCC解决的是当…