首页 > web前端 > js教程 > base64字符串与图片相互转换实例

base64字符串与图片相互转换实例

小云云
发布: 2018-03-17 14:54:26
原创
3426 人浏览过

一.base64字符串转图片原理是当base64字符串作为img标签的src属性时,如果是有效的,则可以预览。而若要下载,则创建一个新的a标签将a标签的href属性设置为该base64字符串设置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字符串的PHP代码

以上是base64字符串与图片相互转换实例的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板