图片保存到本地使用指南原生js实现base64图片下载_base64基础知识教程

在项目开发过程中,经常会有图片导出的需求,实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法。实现代码:function downloadFile(content, fileName) { //下载base64图片var base64ToBl

图片保存到本地使用指南原生js实现base64图片下载

在项目开发过程中,经常会有图片导出的需求,实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法。

图片保存到本地使用指南原生js实现base64图片下载_base64基础知识教程

实现代码:

function downloadFile(content, fileName) { //下载base64图片
	var base64ToBlob = function(code) {
		let parts = code.split(';base64,');
		let contentType = parts[0].split(':')[1];
		let raw = window.atob(parts[1]);
		let rawLength = raw.length;
		let uInt8Array = new Uint8Array(rawLength);
		for(let i = 0; i < rawLength; ++i) {
			uInt8Array[i] = raw.charCodeAt(i);
		}
		return new Blob([uInt8Array], {
			type: contentType
		});
	};
	let aLink = document.createElement('a');
	let blob = base64ToBlob(content); //new Blob([content]);
	let evt = document.createEvent("HTMLEvents");
	evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
	aLink.download = fileName;
	aLink.href = URL.createObjectURL(blob);
	aLink.click();
};

使用:

downloadFile('图片名称', 'data:image/png;base64,iVBORw0KGg....');
海计划公众号
(0)
上一篇 2020/04/03 19:38
下一篇 2020/04/03 19:38

您可能感兴趣的内容

  • 每个 JavaScript 工程师都应当知道的 10 个面试题攻略教程_面试指南教程

    对大部分公司来说,招聘技术人员这种事情,管理层就应该放手交给技术团队,只有他们才能够准确地判断应聘者的技术实力。如果你恰巧是应聘者,你也是迟早都要去面试的。不管你是哪边的,都让大哥来教你几招。以人为本在 How to Build a High Velocity Development Team 一文中,我提出了一些观点,我觉得这些观点很重要,所以在这里再重复

    2020/04/05
  • 移动端导航布局小白攻略_布局菜鸟知识

    写在最前:移动端中导航的网格式布局无处无在,宽高怎么设置相适应?元素怎么居中对齐?不同场景怎么选择代码最高效?巧妙使用margin、padding等基础属性,小小技巧可以解决许多烦恼!一、Float布局1、场景首页导航布局(无间距)2、页面布局<div class="g

    2020/03/29
  • Scraperjs基础知识 基于JS的一个功能齐全的网络爬虫.

    Scraperjs小白知识 官方网址:https://github.com/ruipgil/scraperjs GitHub:https://github.com/ruipgil/…

    2020/03/06
  • AweSomes小白攻略_网页前端资源库

    AweSomes小白攻略 官方网址:https://www.awesomes.cn/ 简介描述:网页前端资源库 AweSomes 网站是一个致力于打造高质量的前端资源库,深度对接到…

    2020/03/06
  • XML处理指令入门百科_xml基础指南

    处理指令(PIs)允许文档包含用于应用程序的指令。指令并不是文档字符数据的一部分,但是必须通过应用程序传递。 处理指令可以用于将信息传递给应用程序。处理指令可以出现在文档任意位置的标记外部。可以出现在序言中,包括文档的类型定义(DTD),文本内容或者文档之后。处理指令,允许文档中包含由应用程序来处理的指令。在XML文档中,有可能会包含一些非XML格式的数据,

    Web前端 2020/03/24
  • Css边框阴影:box-shadow属性入门指南_属性使用教程

    天在写一个点亮灯泡的小项目的时候,用到了box-shadow属性。感觉这个属性挺有意思的,索性专门整理一下。一. box-shadow的定义和语法定义:box-shadow是css3新增的一个属性。在W3School里,定义box-shadow是向框添加一个或者多个阴影的属性。 语法:box-shadow: h-shadow v-shadow blur sp

    2020/03/26
  • Ubuntu Pastebin使用帮助_发布代码工具

    Ubuntu Pastebin使用帮助 官方网址:https://paste.ubuntu.com/ 简介描述:发布代码工具 这是一个发布代码的网站。打开后(不用注册)输入post…

    2020/03/11
  • 浏览器刷新事件的监听和使用菜鸟指南_刷新菜鸟教程下载

    浏览器F5刷新的时候有一个刷新执行之前的事件,beforeunload 事件,这个事件可以提示用户在刷新页面之前有一个提示。下面是beforeunload的用法:首先在methods中定义beforeunload事件beforeunloadHandler(e) {// e.preventDefault()// e.returnValue = ”e.retu

    2020/03/30
  • Flutter的生命周期和路由基础教程_Flutter入门百科

    Flutter主要有两种:无状态的 StatelessWidget和有状态的 StatefulWidget1. StatelessWidget一个 StatelessWidget 是不能被改变的,比如:Icon、Text等。由于不可改变,因此并没有什么生命周期。2. StatefulWidget一个 StatefulWidget 是有状态的,可变的。一个 S

    2020/03/23
  • 在vue中使用layer弹框插件,实现数据交互功能基础教程_layer攻略教程

    layer.js是一个小巧方便的弹出层插件,目前很多网站都在使用。最近在使用vue框架开发中,需要使用弹窗,就引入了layer.js。引入如下,在main.js中:import ‘./layerm/layer.js’//弹窗
    import ‘./layerm/layer.css’//弹窗样式这样在组件中就可以使用layer.open的功能了,我们都知道lay

    2020/04/05
  • Web前端知识体系精简入门基础教程_web菜鸟指南

    Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍。目的是帮助大家审查自

    2020/04/05
  • PHP异常处理机制入门百科_异常菜鸟攻略

    1、异常概述异常(Exception)是一种错误处理机制,用于在指定的错误发生时改变脚本的正常流程。当异常被触发时,当前代码状态被保存,代码执行被切换到预定义的异常处理器函数(如果有)根据情况,处理器也许会从保存的代码状态重新开始执行代码,终止脚本执行,或从代码中另外的位置继续执行脚本2、异常的基本使用当异常被抛出时,其后的代码不会继续执行,PHP 会尝试查

    2020/03/31
  • 极客公园指南攻略只为商业新变量

    极客公园小白攻略 官方网址:http://www.geekpark.net/ 简介描述:只为商业新变量 极客公园聚焦互联网领域,跟踪最新的科技新闻动态,关注极具创新精神的科技产品。…

    2020/03/06
  • javascript是解释型语言吗?使用帮助_语言入门基础知识

    javascript是一种解释性、直译式脚本语言;是一种动态类型、弱类型、基于原型的语言。C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。解释型语言相对于编译型语言存在的,源代码不是直接翻译成机器语言,而是先翻译成中间代码,再由解释器对中间代码进行解释运行。比如Python/JavaScript / Perl /Shel

    2020/03/22
  • 源文件是什么?入门教程_文件小白帮助

    在开发软件的过程中,我们需要将编写好的代码(Code)保存到一个文件中,这样代码才不会丢失,才能够被编译器找到,才能最终变成可执行文件。这种用来保存代码的文件就叫做源文件(Source File)。源文件一般指用汇编语言或高级语言写出来的代码保存为文件后的结果,源文件是相对目标文件和可执行文件而言的。目标文件是指源文件经过编译程序产生的能被cpu直接识别二进

    2020/03/22
  • jQuery-Knob使用帮助_生成超酷的旋钮特效的jquery插件

    jQuery-Knob使用帮助 官方网址:http://anthonyterrien.com/knob/ GitHub:https://github.com/aterrien/jQ…

    2020/03/06