base64的图片处理技术

最新推荐文章于 2024-06-10 23:57:19 发布

bo o ya ka

最新推荐文章于 2024-06-10 23:57:19 发布

阅读量8.3w

点赞数 1

文章标签： 5g ux ui

原文链接：http://www.cnblogs.com/lemon-zhang/p/7889546.html

版权

项目之前用的是CSS Sprite，但是我所负责的模块需要与后台同步展示不同的图片。后台小哥哥呢说给的是base64，让我轻松展示。

点击看效果

demo

我一头雾水，毕竟没听过，于是乎上百度和博客各种翻阅，便记录下一些前辈们的真知灼见，以便自己以后忘记了还有个地方回顾回顾。

首先，base64长的是个什么样子呢。我只能说非常非常的长和多，这和图片大小有关系，越大的图片base64越长，所以base64适用于小图片。

ps:我在博客园文本编辑器直接复制粘贴base64页面会直接卡死，这是个bug?还是只有我会这样，还是这个base64太长了？于是乎我还是截图上传吧。

看了上图那个滚动条，你就知道其实还有许许多多还没完整的截出来，这下你就知道他是有多长了吧，其实这也怪我，我拿了一个比较大的图片文件。

看完你会问：那什么是base64呢？

其实这一长串东西就叫做base64，另外还有个名字:Data URI scheme。

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

在上面的图1中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

Data URI scheme支持以下数据格式：

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符。

那为什么要使用他呢？

这要从浏览器浏览器图片的引用方式说起。图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的。

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

但是也不是什么图片都可以用base64。需要满足一些条件。

1.尺寸足够小：如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），这种图片往往只有几十字节，却需要一个 http 请求，十分不值得

2.无额外请求

3.可像单独图片一样使用，比如背景图片重复使用等

4.没有跨域问题，无需考虑缓存、文件头或者cookies问题

其实base64也有缺点

就是图片不会导致关键渲染路径的阻塞，而转化为 Base64 的图片大大增加了 CSS 文件的体积（因为太长了，用一两个还OK，用10多个就，，呵呵），CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 阻塞渲染，而图片不会。

Base64 跟 CSS 混在一起，大大增加了浏览器需要解析CSS树的耗时。

说了这么多，怎么可以得到base64呢

个人试过了三种方式

1.google浏览下放入图片在资源栏里点击图片获取

2.专用于base编码的网站提供了专用的工具

https://tool.css-js.com/base64.html 这个挺好用的

3.代码实现

用html5的file api里的 readAsDataURL函数这是一个把文件转化成base64编码

附上自己的demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <title>Document</title>
    <style>
        body{
            text-align: center
        };
        #base64{
            width:400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img id="base64" src="https://img-blog.csdnimg.cn/2022010620413594798.png">
    <div class="file">
        <input type="file" value="sdgsdg" id="demo_input" /> 
        <textarea id="result" rows=30 cols=300></textarea> 
        <div id="img_area"></div> 
    </div>
    <script>
        $(function() {
          
            if ( typeof(FileReader) === 'undefined' ){  
                $('#result').html("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
                $('#demo_input').attr('disabled','disabled');
            } else { 
                $('#demo_input').change(readFile);
            }  
            function readFile(){ 
                var file = this.files[0]; 
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 
                if(!/image\/\w+/.test(file.type)){ 
                    alert("请确保文件为图像类型"); 
                    return false; 
                }
                var reader = new FileReader(); 
                reader.readAsDataURL(file); 
                reader.onload = function(e){ 
                $('#result').html('<img src="'+this.result+'" alt=""/>'); 
                $('#img_area').html('<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>'); 
            } 
            }; 
        });
    </script>
</body>
</html>

　　另外还有一种canvas转换方法就没去试了，不过IE8都不支持FileReader和canvas，这个值还得后台给才行。

转载于:https://www.cnblogs.com/lemon-zhang/p/7889546.html

bo o ya ka

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
base64的图片处理技术

项目之前用的是CSS Sprite，但是我所负责的模块需要与后台同步展示不同的图片。后台小哥哥呢说给的是base64，让我轻松展示。点击看效果demo我一头雾水，毕竟没听过，于是乎上百度和博客各种翻阅，便记录下一些前辈们的真知灼见，以便自己以后忘记了还有个地方回顾回顾。首先，base64长的是个什么样子呢。我只能说非常非常的长和多，这和图片大小有关系，越大的图片base64越长，所...
复制链接

扫一扫