img图片转码base64使用（简单版）

使用接口传数据时img可以使用base64转码后传给后台，文笔不行直接上代码和效果图

没查资料不知道什么版本可行可不行

看效果图

<input type="file" onchange="getimgs()"   name="" id="gfile" style="" />

<script>var getimgs = function(){let file = document.querySelector('#gfile').files[0];let reader = new FileReader();let imgFile;console.log(file)if(file!=undefined&&file.type==="image/jpeg"){reader.readAsDataURL(file);reader.onload = ( e )=>{imgFile = e.target.result;let arr = imgFile.split(",");// arr[1] 就是图片的 Base64编码字符串console.log(arr[1].length); // 前缀“data:image/png;base64,”对此有疑问的可以去文章底部链接了解let base64 = `data:image/png;base64,${arr[1]}`;console.log(base64)}}}</script>

这个写完后就能看到,arr[1]就是转base64后的图片。看图

但是这样不太美观，那我们可以这样玩，再给加一个img图片用来预览。

不多说上代码。

<img id="fileimg" onclick="onclickshowfile()" style="width:50px;height:50px;" src="#" alt="" />
<input type="file" onchange="getimgs()"   name="" id="gfile" style="display: none;" />

 <script>// 点击图片后给出发file按钮的点击事件来选择图片var onclickshowfile=function(){document.querySelector('#gfile').click()}var getimgs = function(){let file = document.querySelector('#gfile').files[0];let reader = new FileReader();let imgFile;if(file!=undefined&&file.type==="image/jpeg"){reader.readAsDataURL(file);reader.onload = ( e )=>{imgFile = e.target.result;let arr = imgFile.split(",");// arr[1] 就是图片的 Base64编码字符串// 前缀“data:image/png;base64,”对此有疑问的可以去文章底部链接了解let base64 = `data:image/png;base64,${arr[1]}`;console.log(base64)// 将图片src地址换成转码后来预览document.querySelector('#fileimg').src = `${base64}`;}}}</script>

然后当你弄完后会发现变成这样

真不错，完活。

阿对，还有使用vue的就更简单了，看代码

<img id="fileimg" @click="onshowfile" style="width:50px;height:50px;" src="#" alt="">
<input type="file" @change="getimgs(this)"  name="" id="gfile" style="display:none" />

 methods:{onshowfile(){document.querySelector('#gfile').click();},getimgs(){let file = document.querySelector('#gfile').files[0];let reader = new FileReader();let imgFile;if(file!=undefined&&file.type==="image/jpeg"){reader.readAsDataURL(file);reader.onload = ( e )=>{imgFile = e.target.result;let arr = imgFile.split(",");// arr[1] 就是图片的 Base64编码字符串// 前缀“data:image/png;base64,”对此有疑问的可以去文章底部链接了解let base64 = `data:image/png;base64,${arr[1]}`;document.querySelector('#fileimg').src = base64;}}},
}

好了好了，基础操作就这么些，有空了就在发设置图片大小和格式的要求。拜拜！~

注：对base64前缀好奇或想了解的话参考。【象在舞】的这篇文章：HTML中img标签base64显示图片

img图片转码base64使用（简单版）相关推荐

小程序选择手机图片后压缩图片转码base64
xml: <canvas canvas-id="attendCanvasId" style="width:375rpx;height:520rpx;position ...
vue本地读取图片转码Base64
<input type="file" id="id" name="image" class="getImgUrl_file& ...
ps如何将图片转化成线稿简单版
学习目标: 用到Adobe Photoshop CC 2018 图片转化成线稿学习内容: 1. 下载ps 2. 安装ps 3. 导入图片 4. 开始操作学习时间: 1. 周一至周五晚上 7 点-晚 ...
搭建图片加密平台，扫码支付后简单获取密码
搭建图片加密平台,扫码支付后简单获取密码很多人问我,互联网上到底做什么项目是可以赚到钱的?没有基础,不懂技术,不会推广,所以有没有简单一点的,一操作就能上手就能赚钱的?我可以很肯定的告诉你:没有. ...
小程序源码：大红喜庆版UI猜灯谜又叫猜字谜-多玩法安装简单
大家好给大家带来一款UI比较喜庆的猜灯谜小程序大家看演示图的时候当然也是可以看得到那界面是多么的喜庆而且新的一年也很快就来了,所以种种的界面可能都比较往喜庆方面去变吧这款小程序搭建是免服务器和域 ...
根据传入坐标和图片URL地址对图片进行切图操作、将图片转化成Base64位码
目录 1.根据传入坐标和图片URL地址对图片进行切图操作 2.将图片转化成Base64位编码.根据传入坐标算出切点坐标在开发过程的学习记录,此两个工具类主要是对图像的处理(切图),对文件的想换转化 ...
国庆头像小程序源码，带独立版后台同时可添加小程序跳转+流量主，所有改动均可后台添加+带搭建教程
微信小程序实现国旗头像,国庆个性化头像国庆头像小程序源码,带独立版后台同时可添加小程序跳转+流量主,所有改动均可后台添加+带搭建教程快去挑选一个自己喜欢的国庆头像吧,只需简单两步即可制作自己专属国 ...
base64转html文件,图片转换成Base64编码集成到html文件
首先为什么要这么做? 原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...
nmmqq.php?/lspc.html,html中的图片直接使用base64编码后的字符串代替详解
网页中的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme,下面有个不错的示例,大家可以参考下最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看 ...

img图片转码base64使用（简单版）

img图片转码base64使用（简单版）相关推荐

最新文章

热门文章