从零开始学_JavaScript_系列（36）——base64字符串与图片的相互转换

r囧r小猫 2022-06-15 10:39 184阅读 0赞

## base64字符串转图片 ##

原理是当base64字符串作为img标签的src属性时，如果是有效的，则可以预览。

而若要下载，则

1.  创建一个新的a标签
2.  将a标签的href属性设置为该base64字符串
3.  设置a标签的download属性为文件名

再通过js手动触发该a标签的点击事件，则完成了下载行为（具体视浏览器可能需要选择下载目录或者使用默认目录）。

## 图片转base64字符串 ##

分为两种，一种是提供图片的src标签，另一种是通过上传图片文件。

### 提供图片的src标签 ###

需要借助canvas标签来完成。

优点是……可以缩放图片大小？

缺点是不能跨域（但另外一个也不行）

顺序如下：  
1. 用户提供src  
2. 创建新的img标签，并将src设置给img标签  
3. img标签加载完毕（onload回调触发），继续执行以下代码：  
4. 将该图片写入canvas（此时可以根据图片大小设置该canvas的大小，或者让图片自适应canvas的大小）  
5. 通过canvas的toDataURL方法获取base64字符串  
6. 输出该base64字符串；

### 文件上传形式 ###

需要input标签支持type=file，需要使用FileReader对象

优点是选完文件后自动转换，操作更简单一些。

顺序如下：

1.  当type=file的input标签触发onchange事件时，开始执行以下指令
2.  创建一个新的FileReader对象；
3.  使用其的readAsDataURL这个API，读取文件内容；
4.  当读取成功时（触发onload回调函数），可以通过回调函数的参数e，利用属性e.target.result获取base64字符串；
5.  该base64字符串即为所需要的内容。

DEMO页面：

[图片转为base64字符串][base64]

[base64字符串转为图片][base64 1]

[base64]: http://www.jianwangsan.cn/%E5%9B%BE%E7%89%87tobase64.html
[base64 1]: http://www.jianwangsan.cn/base64to%E5%9B%BE%E7%89%87.html

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 Base64字符串与图片的相互转换

本篇博客记载的是一个我们在开发过程中很常用的一个小功能，就是我们在处理图片的时候做数据存放到数据库的功能，我们存放的不再是本地路径而是一个Base64的字符串！然后我们在取

你的名字/ 2024年04月01日 18:51/ 0 赞/ 66 阅读

相关 Java图片与Base64编码相互转换

import org.apache.commons.lang3.ArrayUtils; import java.io.FileInputStream;

绝地灬酷狼/ 2022年12月17日 05:59/ 0 赞/ 180 阅读

相关从零开始学_JavaScript_系列（15）——js系列<3>（转为字符串，截取字符串）

（29）把json转化为字符串 JSON.stringify(store) 即可（注意JSON要大写），store是json对象（30）对一个数组赋值 ①

红太狼/ 2022年08月21日 12:45/ 0 赞/ 134 阅读

相关从零开始学_JavaScript_系列（30）——NodeList

（48）NodeList的forEach github连接： https://github.com/qq20004604/some\_demo/tree/master/No

骑猪看日落/ 2022年07月16日 09:43/ 0 赞/ 283 阅读

相关从零开始学_JavaScript_系列（33）——dom.append()与$.append()

（39）dom.append()与$.append() 通过原生js获取到的dom，和通过jQuery获取到的dom，都有append方法，但是他们表现出来的效果是有所区别的

ゝ一世哀愁。/ 2022年07月11日 07:37/ 0 赞/ 172 阅读

相关从零开始学_JavaScript_系列（36）——base64字符串与图片的相互转换

base64字符串转图片原理是当base64字符串作为img标签的src属性时，如果是有效的，则可以预览。而若要下载，则 1. 创建一个新的a标签 2. 将a

r囧r小猫/ 2022年06月15日 10:39/ 0 赞/ 185 阅读

相关从零开始学_JavaScript_系列（43）——Symbol简述

Symbol 0、一句话总结 1. 一个新的数据类型； 2. 当key时，只有指定遍历方法，才能获取该属性名； 3. Symbol.for(key)方法，同样

墨蓝/ 2022年06月14日 00:47/ 0 赞/ 272 阅读

相关从零开始学_JavaScript_系列（47）——Reflect

Reflect 1、是什么？ 1. window的原生对象，但不能通过new来生成实例； 2. 对对象的属性的操作，都可以通过这个来完成（读、写、定义属性等）；

迷南。/ 2022年06月12日 20:45/ 0 赞/ 220 阅读

相关从零开始学_JavaScript_系列（58）——Thunk函数

1、Thunk函数基本定义 1.1、缘由与函数的求值策略有关，求值策略分为两种： 1. 传名策略：在需要求值的时候才求值； 2. 传值策略：在传入函数的时候

柔光的暖阳◎/ 2022年06月09日 02:23/ 0 赞/ 198 阅读

相关 base64字符串与图片的相互转换

一.base64字符串转图片原理是当base64字符串作为img标签的src属性时，如果是有效的，则可以预览。而若要下载，则创建一个新的a标签将a标签的

悠悠/ 2021年09月14日 21:18/ 0 赞/ 681 阅读