图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,使用 base64 传输图片文件可以节省一个 http 请求,图片的 base64 编码可以算是前端优化的一环

VUE Base64编码图片展示

<img :src="icon">

export default {
data() {
icon: 'data:image/png;base64,,XXXXX...',
}
}

图片在线转换Base64:http://imgbase64.duoshitong.com/

Base64编码转换图片

base64ImgtoFile(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}, // base64编码的图片
var base64Img = 'data:image/png;base64,XXXXX...';
//转换图片文件
var imgFile = this.base64ImgtoFile(base64Img);

文件转换base64编码

<el-upload
class="avatar-uploader"
action=""
ref="uploadAvatar"
:show-file-list="false"
:auto-upload="false"
:on-change="changeFile">
<img v-if="imageUrl" :src="imageUrl" class="uploadAvatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> data() {
return {
imageUrl: '',
imageBaseUrl: '',
}
} /**
* 文件框改变事件
* @param file
* @param fileList
*/
changeFile(file, fileList) {
const isJPGORPNG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png');
const isLt1M = file.size / 1024 / 1024 < 1; if (!isJPGORPNG) {
this.$message.info('上传头像图片只能是 JPG 或 PNG 格式!');
return;
}
if (!isLt1M) {
this.$message.info('上传头像图片大小不能超过 1MB!');
return;
} var This = this;
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = function(e){
this.result; //base64编码
This.imageBaseUrl = this.result;
This.imageUrl = this.result;
}
},

更便捷的图片转化Base64编码方式

利用 Chrome 浏览器,在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码

VUE Base64编码图片展示与转换图片的更多相关文章

  1. C# 在网页中将Base64编码的字符串显示成图片

    在写一个接口,返回的json里面有图片,是Base64编码的字符串. 测试接口的时候,发现原来在html显示,是直接可以将Base64编码的字符串显示成图片的. 格式如下: <img src=d ...

  2. android Java BASE64编码和解码二:图片的编码和解码

    1.准备工作 (1)在项目中集成 Base64 代码,集成方法见第一篇博文:android Java BASE64编码和解码一:基础 (2)添加 ImgHelper 工具类 package com.a ...

  3. php把网络图片转Base64编码。(php将图片链接直接转化为base64编码)

    /** 把网络图片图片转成base64 * @param string $img 图片地址 * @return string */ /*网络图片转为base64编码*/ public function ...

  4. 强大的图片展示插件,JQuery图片预览展示插件

    只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...

  5. 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...

  6. python cv2展示网络图片、图片编解码、及与base64转换

    从网络读取图像数据并展示 需要使用cv2.imdecode()函数,从指定的内存缓存中读取数据,并把数据转换(解码)成图像格式:主要用于从网络传输数据中恢复出图像. # -*- coding: utf ...

  7. Java对网络图片/本地图片转换成Base64编码和解码

    一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...

  8. python base64编码和解码图片

    简介 在实际项目中,可能需要对图片进行大小的压缩,较为常见的方法则是将图片转换为base64的编码,本文就python编码和解码图片做出一定的介绍. 代码 import base64 import o ...

  9. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

随机推荐

  1. Ubuntu修改时间

    Ubuntu修改时区和更新时间 先查看当前系统时间 date -R 结果时区是:+0000 我需要的是东八区,这儿显示不是,所以需要设置一个时区 运行 tzselect 在这里我们选择亚洲 Asia, ...

  2. DS-5新加交叉编译工具

    Adding New Compiler Toolchains to DS-5 In this tutorial, you will learn how to add new compiler tool ...

  3. ELK输出nginx的日志(未完成)

    我们先准备3台centos7服务器 171 做 elasticsearch,kibana的操作 172 做logstash 的操作 173 做nginx 的操作 软件 版本号 elasticsearc ...

  4. hdu 6308 Time Zone (模拟+字符串处理)

    Time Zone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  5. The Preliminary Contest for ICPC Asia Xuzhou 2019

    A:Who is better? 题目链接:https://nanti.jisuanke.com/t/41383 题意: 类似于有N个石子,先手第一次不能拿完,每次后手只能拿 1 到 前一次拿的数量* ...

  6. SVN重新定位操作流程

    因服务器其他系统需要SVN原来使用的443端口无法继续使用需要更换,服务器SVN端口已更新为8443,现将个人电脑SVN文件夹路径重新定位流程展示如下: 确定即修改成功!

  7. web前端分享JavaScript到底是什么?特点有哪些?

    web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...

  8. Geoserver设置style

    1 背景 我们在ArcMap中可以直接通过symbol功能对图层进行定制化配图.但是,如果我们将配好图的shp图层在GeoServer中发布时,会发现图层样式完全丢失了.其实原因很简单,用ArcMap ...

  9. React路由基本的使用(一)

    路由的基本使用 下载 npm i -D react-router react-router-dom APP.js ps==>NavLink 选中的时候 可以高亮 demo 是你自己添加的一个类哈 ...

  10. Caffeine批量加载浅析

    最近项目中的本地缓存,看是从Guava改成了Caffeine,据说是性能更好,既然性能更好的话,那么就用起来吧.不过在使用过程中,发现了单个load和批量loadall方面的一些小设置,记录一下. 一 ...