精华内容
下载资源
问答
  • VUE Base64编码图片展示与转换图片

    千次阅读 2020-06-23 14:25:24
    VUE Base64编码图片展示与转换图片VUE Base64编码图片展示与转换图片VUE Base64编码图片展示Base64编码转换图片文件转换base64编码更便捷的图片转化Base64编码方式 VUE Base64编码图片展示与转换图片 图片base64 ...

    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.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 编码
    在这里插入图片描述以上为本篇文章的主要内容,希望大家多提意见,如果喜欢记得点个推荐哦

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

    展开全文
  • 图片base64编码,即将图片转化为一串字符串,该字符串可替代图片的地址。 <template> <div> <input type="file" id="id" name="image" accept="image/jpg, image/jpeg, image/png" @change=...

    将图片转base64编码,即将图片转化为一串字符串,该字符串可替代图片的地址。

    <template>
        <div>
            <input type="file" id="id" name="image" accept="image/jpg, image/jpeg, image/png" @change="img()">
            <!-- <div v-for="item in picPathList" :key="item.index">
                <img :src="item.src" alt="" style="width:100px;height:100px">
            </div> -->
            <img :src="picPath" alt="" style="width:100px;height:100px">
        </div>
    </template>
    
    export default {
        data() {
            return {
                // picPathList:[],
                picPath:"",
            }
        },
        methods:{
            img() {
                let imgList;
                let base64Img;
                let file = document.getElementById("id").files[0]; //获取图片对象
                let reader = new FileReader(); //实例化对象
                reader.readAsDataURL(file) //将文件读取为DataURL
                reader.onload = e => { 
                    imgList = e.target.result
                    base64Img = imgList.split(',')[1] //imgList.split(',')[1]:为图片的Base64编码,base64url格式:'data:image/png;base64,'+ base64
                    this.picPath='data:image/png;base64,'+ base64Img
                    // this.picPathList.push({src:this.picPath})
                }
    
            },
        }
    }
    

    需要在img标签中展示图片仅需将路径拼接为:‘data:image/png;base64,’+ base64该格式
    效果展示:
    在这里插入图片描述
    补充:
    在这里插入图片描述
    代码中的这一部分我起初是这样写的:
    在这里插入图片描述
    这样会导致异步从而 2处的this.picPath将获取不到值
    在这里插入图片描述

    展开全文
  • 生而为人 谁不付出 谁不努力 ...1转换为base64编码 function img_base64(){ var imgSrc = img_url; // var imgSrc = "img/1.jpg"; function getBase64(img){//传入图片路径,返回base64 function getBa...

    生而为人 谁不付出 谁不努力

    很多时候在处理图片的时候需要先转换格式

    1转换为base64编码

    function img_base64(){
    	 var imgSrc = img_url;
    //   var imgSrc = "img/1.jpg";
         function getBase64(img){//传入图片路径,返回base64
           function getBase64Image(img,width,height) {//width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
             var canvas = document.createElement("canvas");
             canvas.width = width ? width : img.width;
             canvas.height = height ? height : img.height;
    
             var ctx = canvas.getContext("2d");
             ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
             var dataURL = canvas.toDataURL();
             $("#img_base64").attr("src",dataURL);
             return dataURL;
           }
           var image = new Image();
           image.crossOrigin = '';
           image.src = img;
           var deferred=$.Deferred();
           if(img){
             image.onload =function (){
               deferred.resolve(getBase64Image(image));//将base64传给done上传处理
             }
             return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
           }
         }
         getBase64(imgSrc)
           .then(function(base64){
             console.log(base64);
           },function(err){
             console.log(err);
           });
    }

     

    展开全文
  • Web 图片Base64编码

    千次阅读 2017-04-17 20:33:41
    转载自: 【前端攻略】:玩转图片Base64编码引言 图片处理在前端工作中可谓占据了很重要的一壁江山。而图片base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片base64 编码。标题略大,...

    转载自: 【前端攻略】:玩转图片Base64编码

    引言  

    图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的 base64 编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它。

    什么是 base64 编码?  

    我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。

    这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术的应运而生,但是 csssprites 有自身的局限性,下文会提到)。

    没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了,而 base64 正好能解决这个问题。

    那么图片的 base64 编码长什么样子呢?举个栗子。www.google.com 的首页搜索框右侧的搜索小图标使用的就是base64编码。我们可以看到:

    这里写图片描述

    //在css里的写法
    #fkbx-spch, #fkbx-hspch {
      background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
    }
    //在html代码img标签里的写法
    <img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

    上面分别是图片的 base64 编码在 css 里面的写法和在 html 标签里的写法。base64 编码长得就是这个样子,当然 base64 编码不仅仅运用在图片编码,还可以:

    thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa(不要复制我我真的不是种子)

    嘿嘿没错,迅雷的“专用地址”也是用 Base64 加密的,有兴趣自行 google,不做赘述。

    为什么要用 Base64  

    那么为什么要使用 base64 传输图片文件?上文也有提及,因为这样可以节省一个 http 请求。图片的 base64 编码可以算是前端优化的一环。效益虽小,但却缺能积少成多。

    说到这里,不得不提的是 CssSprites 技术,后者也是为了减少 http 请求,而将页面中许多细小的图片合并为一张大图。那么图片的 base64 编码和 CssSprites 有什么异同,又该如何取舍呢?

    所以,在这里要明确使用 base64 的一个前提,那就是被 base64 编码的图片足够尺寸小。以博客园的 logo 为例:

    这里写图片描述

    如图所示,博客园的 Logo 只有 3.27KB,已经很小了,但是如果将其制作转化成 base64 编码,生成的 base64 字符串编码足足有 4406 个,也就是说,图片被编码之后,生成的字符串编码大小一般而言都会比原文件稍大一些。即便 base64 编码能够被 gzip 压缩,压缩率能达到 50% 以上,想象一下,一个元素的 css 样式编写居然超过了 2000个 字符,那对 css 整体的可读性将会造成十分大的影响,代码的冗余使得在此使用 base64 编码将得不偿失。

    那么,是不是表示 base64 编码无用武之地呢?不然。当页面中的图片满足以下要求,base64 就能大显生手。

    如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新。

    那么此时使用 base64 编码传输图片就可谓好钢用在刀刃上,思前想后,符合这个规则的,有一个是我们经常会遇到的,就是页面的背景图 background-image 。在很多地方,我们会制作一个很小的图片大概是几px*几px,然后平铺它页面当背景图。因为是背景图的缘故,所以无法将它放入雪碧图,而它却存在网站的很多页面,这种图片往往只有几十字节,却需要一个 http 请求,十分不值得。那么此时将它转化为 base64 编码,何乐而不为?

    下面是一个只有 50 字节的2*2的的背景图。将其转化成 base64 编码,只有 100 多个字符,相比一个 http 请求,这种转换无疑更值得推崇。

    这里写图片描述

    CssSprites与Base64编码  

    简单陈述一下我对何时这使用这两种优化方法的看法。

    使用CssSprites合并为一张大图:

    • 页面具有多种风格,需要换肤功能,可使用CssSprites
      网站已经趋于完美,不会再三天两头的改动(例如button大小、颜色等)
    • 使用时无需重复图形内容
    • 没有 Base64 编码成本,降低图片更新的维护难度。(但注意 * Sprites 同时修改 css 和图片某些时候可能造成负担)
    • 不会增加 CSS 文件体积

    使用base64直接把图片编码成字符串写入CSS文件:

    • 无额外请求
    • 对于极小或者极简单图片
    • 可像单独图片一样使用,比如背景图片重复使用等
    • 没有跨域问题,无需考虑缓存、文件头或者cookies问题

    更便捷的将图片转化为Base64编码 

    将图片转化为 base64 编码有许多工具,例如本文中我所使用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ,但是很多这些网站是国外网站,经常被墙登陆不了。这里介绍一个更为快捷的方法,就是利用 Chrome 浏览器(我想 FEer 都应该有Chrome 浏览器吧=。=)。

    在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码,是不是很方便。
    这里写图片描述

    一些误区

    base 64 虽有优点,但是缺点也很明显,在使用上存在一些明显的缺陷。

    使用 Base64 不代表性能优化

    是的,使用 Base64 的好处是能够减少一个图片的 HTTP 请求,然而,与之同时付出的代价则是 CSS 文件体积的增大。

    而 CSS 文件体积的增大意味着什么呢?意味着 CRP 的阻塞。

    CRP(Critical Rendering Path,关键渲染路径):当浏览器从服务器接收到一个HTML页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”。

    通俗而言,就是图片不会导致关键渲染路径的阻塞,而转化为 Base64 的图片大大增加了 CSS 文件的体积,CSS 文件的体积直接影响渲染,导致用户会长时间注视空白屏幕。HTML 和 CSS 阻塞渲染,而图片不会。

    页面解析 CSS 生成的 CSSOM 时间增加

    Base64 跟 CSS 混在一起,大大增加了浏览器需要解析CSS树的耗时。其实解析CSS树的过程是很快的,一般在几十微妙到几毫秒之间。

    CSS 对象模型 (CSSOM):CSSOM是一个建立在web页面上的 CSS 样式的映射,它和DOM类似,但是只针对CSS而不是HTML。

    CSSOM 生成过程:

    这里写图片描述

    CSSOM 生成过程大致是,解析 HTML ,在文档的 head 部分遇到了一个 link 标记,该标记引用一个外部 CSS 样式表,下载该样式表后根据上述过程生成 CSSOM 树。 这里我们要知道的是,CSSOM 阻止任何东西渲染,(意味着在CSS没处理好之前所有东西都不会展示),而如果CSS文件中混入了Base64,那么(因为文件体积的大幅增长)解析时间会增长到十倍以上。

    而且,最重要的是,增加的解析时间全部都在关键渲染路径上。

    所以,当我们需要使用到 Base64 技术的时,一定要意识到上述的问题,有取舍的进行使用。

    展开全文
  • 图片Base64编码

    2019-04-29 11:03:55
    有时我们为了减少对图片的html请求,可以讲图片编码base64的格式,直接在html中展示图片.讲base64编码后的图片解码我们发现,svg标签,,使用一个浏览器可以解读的标签对图片进行了解析. 格式如下 <img src="data:...
  • 很多javaweb开发人员可能都会遇到当图片Base64的字符串存在数据库中,怎么展示到页面上呢?我所熟知的有两种方法: 1.直接使用Data URI scheme,即将后台存的base64字符串直接传到页面,页面的img等使用时指定src=...
  • Android加载Base64编码格式的图片

    千次阅读 2019-03-26 22:31:01
    Base64是传输字节码的编码,Android开发过程中,图片的加载多数是请求URL路径或者加载本地的图片,当然也有加载服务器用Base64编码过的图片,比如图形验证码。当然图形验证码我们Android也可以用代码写,这里就介绍...
  • 相信很多同学在工作中,经常会用到Base64编码,那大家知道为什么会有Base64编码吗?我们为什么要使用它呢,它又是怎么实现的呢?下面就让我们来一起深入探究一下Base64编码吧。Base 家族在开始之前,我们先给大家...
  • 解码Base64展示图片

    万次阅读 2017-10-17 14:23:18
    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。 Base64编码是从二进制到字符的过程,可用于在HTTP环境下传递较长的标识信息。 例如,在Java ...
  • 首先讲一下什么是Base64编码
  • 昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack中配置了图片在10kb以内自动转换base64,所有就...
  • 1.这是我前端的代码,有一个img标签,用来显示图片用的,还有一个 input type是file的输入框,其实就是选择图片的: <div class="layui-form-item"> <label class="layui-form-label">专题图片</...
  • Base64编码显示图片---踩坑笔记

    千次阅读 2019-07-25 14:06:11
    Java将图片转为base64编码 直入主题,先上代码 /** * 获取图片Base64编码字符串 * * @param imgPath 文件路径 * @return */ public String getImgBase64(String imgPath) { // 将图片转为字节数组 byte...
  • js通过base64编码显示图片

    万次阅读 2019-06-27 09:36:05
    js通过base64编码显示图片 base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求Data URI scheme。 Data URI scheme是...
  • base64编码

    万次阅读 2017-09-26 11:24:00
     用于界面图片展示,将图片转换为Base64编码一般用于小图片上。 2.好处  2.1 不再需要去寻找一个保存图片的地方,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中; 2.2不仅可以减少...
  • 1. 什么是图片base64编码 图片base64编码就是可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址url。 网页上展示的时候是这样的(后面的…非常长) 我们所看到的网页上的每一个图片,都是需要...
  • 方法 function dataURLtoFile(dataurl, filename ... let arr = dataurl.split(',') // 结果:base64编码的英文字符 let mime = arr[0].match(/:(.*?);/)[1] // 结果:image/jpg let suffix = mime.split('/')[1] ...
  • base64编码图片在前端控件中显示的研究。
  • BASE64编码图片在网页中的显示问题的解决
  • 在我们开发应用的过程中,并不是所有情况下都请求图片的URL或者加载本地图片,有时我们需要加载Base64编码图片。这种情况出现在服务端需要动态生成的图片,比如: 二维码 图形验证码 … 这些应用场景有个共同点...
  • 玩转图片Base64编码

    2021-03-07 19:26:39
    图片base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片base64 编码。标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片base64 编码,为什么我们要用它,我们如何...
  • 一、简介:本工具类包含本地图片Base64编码 和 远程图片Base64编码 二、代码实例 package org.jeecg.common.util; import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.io...
  • html使用base64编码图片显示

    千次阅读 2020-05-22 13:59:46
    base64,(base64编码),即可显示对应的图片。 <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAFKCAIAAAC7M9WrAAAACXBIWXMAAA9hAAAPYQGoP6dpAAAJS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94...
  • 一种是图片转为Base64编码,这种编码是直接可以在页面通过的方式显示 Base64 在CSS中的使用 .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); } Base64 在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,574
精华内容 7,029
关键字:

base64编码展示图片