js将图片或者文件转成base64格式的两种方法
场景一,项目assets资源里面的图片本地图片,重点如下
- 需要了解 canvas的基本操作,canvas.toDataURL 方法
HTMLCanvasElement.toDataURL()
方法返回一个包含图片展示的 data URI 。可以使用type
参数其类型,默认为 PNG 格式。图片的分辨率为 96dpi。 - 需要用 require('@/assets/xxx.png') 引入图片,不能直接写 【'@/assets/xxx.png'】这个字符串
- 仅可以转换图片类型的数据
function imgToBase64(url) {const image = new Image();image.src = url;image.onload = () => {const canvas = document.createElement('canvas');canvas.width = image.naturalWidth; // 使用 naturalWidth 为了保证图片的清晰度canvas.height = image.naturalHeight;canvas.style.width = `${canvas.width / window.devicePixelRatio}px`;canvas.style.height = `${canvas.height / window.devicePixelRatio}px`;const ctx = canvas.getContext('2d');if (!ctx) {return null;}ctx.drawImage(image, 0, 0);const base64 = canvas.toDataURL('image/png');return base64;};
},// 引入项目中的图片
const imgUrl = require('xxx.png');
const res = imgToBase64(imgUrl);
console.log('生成的base64图片', res)
场景二,有一个公开的url,比如https//xx.png 或者项目public目录下的图片,重点如下
- 使用 ajax + FileReader
- ajax 异步请求使用XMLHttpRequest、fetch、axios都可以
- 需要将请求的返回格式 responseType 转成 Blob 格式
- 这种方法也适用于文件转成 base64
getBase64(imgUrl) {let xhr = new XMLHttpRequest();xhr.open('get', '/xxx.jpg', true);// 重点1xhr.responseType = 'blob';xhr.onload = function() {if (this.status == 200) {//得到一个blob对象let blob = this.response;// 重点2let oFileReader = new FileReader();oFileReader.onloadend = function(e) {// 结果const base64 = e.target.result};oFileReader.readAsDataURL(blob);}};xhr.send();
},
使用 fetch api请求,大同小异,重点都是 responseType 要设置为blob,再使用 FileReader 的 readAsDataURL 方法把 blob 转成 base64
function getBase64(imgUrl) {var xhr = new XMLHttpRequest();fetch(imgUrl, {responseType: 'blob'}).then(response => {return response.blob();}).then(blob => {let oFileReader = new FileReader();oFileReader.onloadend = function(e) {// base64结果const base64 = e.target.result};oFileReader.readAsDataURL(blob);});
},
重点提示
发现没有?方法一是用的 HTMLCanvasElement.toDataURL() 和 方法二是用的 FileReader.readAsDataURL() 都有一个【DataURL】,这就说明这个【dataURL】是和base64有关系的,所以,以后无论是文件,还是图片转成base64都需要先想到带有【dataURL】的方法。
Data URL,即前缀为
data:
协议的 URL,其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”,直到这个名字被 WHATWG 弃用。bae64的图片/文字就是一种Data URL
请看官方文档
Data URL - HTTP | MDNData URL,即前缀为 data: 协议的 URL,其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”,直到这个名字被 WHATWG 弃用。https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
js将图片或者文件转成base64格式的两种方法相关推荐
- 读取xml文件转成ListT对象的两种方法(附源码)
读取xml文件转成List<T>对象的两种方法(附源码) 读取xml文件,是项目中经常要用到的,所以就总结一下,最近项目中用到的读取xml文件并且转成List<T>对象的方法, ...
- 将pdf转换成jpg格式的两种方法
文件格式转换很难?很多人有这样的想法是因为转换时用了不正确的方法导致转换失败而又找不到好用的方法.其实只要用对了转换方法转换文件是一件非常轻松的事情,下面就以pdf转换成jpg为例,说说文件转换的方法 ...
- MP4怎么转换成MP3格式?两种方法帮你实现
MP4是一种常见的视频格式,而MP3则是一种音频格式.有时候,我们需要将MP4视频转换为MP3音频,例如从YouTube下载视频后只需要提取其中的音频部分.以下是两种方法帮助您实现MP4到MP3的转换 ...
- pdf转换成jpg格式的两种方法
pdf转换成图片格式的方法有很多,比如截图等,但是怎么做效果才最好呢,带着这个疑问一起往下看吧. 在转换pdf文件为图片格式之前,先清楚自己是要将整个pdf文件转换成图片,还是pdf文件中的图片部分转 ...
- python文件打包成可执行文件exe的两种方法
python 可以做网站应用,也可以做客户端应用.但是客户端应用需要运行 py 脚本,如果用户不懂 python 就是一件比较麻烦的事情.幸好 pyton 有第三方模块可以将脚本可以转成 exe 执行 ...
- 读取xml文件转成ListT对象的两种方法
xml格式如下: <?xml version="1.0"?> <products> <product name="West Side S ...
- 多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
- java文件指针,Java 测试文件指针,java测试指针,两种方法打开文件并进行内
Java 测试文件指针,java测试指针,两种方法打开文件并进行内 两种方法打开文件并进行内容定位package com.ronsoft.books.nio.channels;import java. ...
- java中char类型转换成int类型的两种方法
java中char类型转换成int类型的两种方法 方法一: 第一种利用Integer包装类的方法Integer.parseInt Copychar ch = '9'; if (Character.is ...
最新文章
- 「欧拉定理」学习笔记(费马小定理)
- 2018年中美独角兽研究报告
- 20145223 《信息安全系统设计基础》课程总结
- java bufferedimage颜色_java – BufferedImage意外地改变了颜色
- 极大似然估计的朴素理解
- 一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去
- 关于Nginx参数路径问题的问题
- db2 语句包括不必要的列表_列表推导和生成器表达式的滥用
- 网易严选退出双十一:“抵制”鼓吹过度消费
- 标准布局类(11中布局类)
- presto安装及使用 1
- 北京市城八区廉租住房和经济适用住房保障家庭收入、住房、资产标准已确定
- 查看DBUS接口的工具: D-Feet
- 文墨绘学呵护那一点点光
- Unity 触发检测 碰撞检测
- 阿里云IoTStudio中的“移动可视化开发” 重新登场了--让开发APP不再难
- 十六进制转字符串或char字符数组
- Biorhythms(信息学奥赛一本通 1639)
- HTTP 传输大文件的几种方案
- Reactive Extensions (Rx) 入门(4) —— Rx的事件编程②
热门文章
- GNSS算法进阶(二)- kalman滤波单点定位算法代码实现
- 学生信息管理系统(C语言版本+源码)
- xftp7评估版安装使用
- mPaas小程序(支付宝、钉钉...)自定义组件,组件传参
- 如何嗅探并下载ts并合成视频文件,m3u8文件处理
- iframe框架的使用
- 使用iframe的正确姿势
- Linux运维方向技能
- 全志A20编译调试笔记
- 用电子计算机控制海洋牧场,教师用书2016 2017学年高中地理第2单元开发海洋资源第3节海洋生物资源及其开发整合提升.doc...