VUE Base64编码图片展示与转换图片

图片的 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.lengthlet 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-uploadclass="avatar-uploader"action=""ref="uploadAvatar":show-file-list="false":auto-upload="false":on-change="changeFile"><img v-if="imageUrl" :src="data: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 编码
以上为本篇文章的主要内容，希望大家多提意见，如果喜欢记得点个推荐哦

作者：95.8℃
出处：https://www.cnblogs.com/maggieq8324/
本文版权归作者和博客园共有，欢迎转载，转载时保留原作者和文章地址即可。

VUE Base64编码图片展示与转换图片相关推荐

图片转换为base64编码后，实现无图片展示图片
第一部分,将图片转换为base64编码输出为txt文本第二部分,将转换出来的base64编码赋值给b64_code,通过base64编码转换为图片,打开,然后删除 base64编码过长,同时输入过多 ...
android Java BASE64编码和解码二：图片的编码和解码
1.准备工作 (1)在项目中集成 Base64 代码,集成方法见第一篇博文:android Java BASE64编码和解码一:基础 (2)添加 ImgHelper 工具类 package com.a ...
Image：介绍一些跟图片有关的控件，如图片展示特效，图片生产，图片保护等
栏目导航 Java开源 OPEN文档 OPEN搜索 OPEN家园 OPEN资讯提交开源项目 A Accordion AutoComplete Animation C Calendar Charts ...
c#如何wmf图片转换成png图片_C# 批量转换图片格式支持/JPG/TIF/PNG/WMF/GIF等
C# 批量转换图片格式实例源码,可以在BMP/JPG/TIF/PNG/WMF/GIF这几种格式之间批量转换,是否支持逆转换,这个未测试,有兴趣的自己下载源码编译一下吧.本源码实现的原理:将转换过程写入 ...
如何将WPS格式转换为图片格式 WPS转换图片步骤
我们通常在办公中使用最多的就是WPS和office两款软件,就比如说在在WPS软件中办公,然后保存的文件就是以WPS为格式的文件.不过在现如今按照人们浏览的习惯来看,大多数人都喜欢图片的格式,浏览比较 ...
minio图片展示（minio图片上传地址为内网，展示时为外网）
minio图片展示一.minio图片服务器二.图片展示 1.方法一:后端转发 2.方法二:nginx代理一.minio图片服务器拥有两个端口号,一个时web端控制台端口号,一个是上传时使用的端 ...
vue 点击动态展示不同的图片
代码部分:可以用三目运算根据状态判断 <div class="svt-s mainSty-center"><div class="svs hand&qu ...
文件服务器图片展示,文件服务器的图片
文件服务器的图片内容精选换一换 1.背景:得益于速度更快的WiFi和5G技术以及机器学习与人工智能的技术演进,很多企业逐步进入实施数字化转型.如全球大约拥有300多亿台物联网设备,物联网技术正在逐 ...
浅谈：canvas绘制图片，canvas转换图片灰度值。
主要使用的是canvas的属性,不懂的可以w3c了解一下使用方法,其中转化需要灰度计算公式,网上也有很多的方法,主要根据业务需求. 直接上代码,不明白的滴滴我 qq裙:182415907:@群主: 记 ...

VUE Base64编码图片展示与转换图片

VUE Base64编码图片展示与转换图片

VUE Base64编码图片展示与转换图片

VUE Base64编码图片展示

Base64编码转换图片

文件转换base64编码

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

VUE Base64编码图片展示与转换图片相关推荐

最新文章

热门文章