欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用HTML5的FileReader对象将图片转化成base64格式

程序员文章站 2022-03-30 22:01:47
...


<article class="baidu_pl">
                <div id="article_content" class="article_content clearfix">
                                                <div class="article-copyright">
                <span class="creativecommons">
                <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
                    </a>
            <span>
                版权声明:本文为博主原创文章,遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议,转载请附上原文出处链接和本声明。            </span>
               <div class="article-source-link2222">
                    本文链接:<a href="https://blog.csdn.net/yasha97/article/details/83629057">https://blog.csdn.net/yasha97/article/details/83629057</a>
                </div>
            </span>
                    </div>
                                                    <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css">
                                        <div id="content_views" class="markdown_views prism-atom-one-dark">
                    <!-- flowchart 箭头图标 勿删 -->
                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                    </svg>
                                            <p>注:相关链接<a href="https://blog.csdn.net/yasha97/article/details/83629510" rel="nofollow" data-token="1e6379e62bdd3d81a625b09cd1ccdb0f">《10分钟教会你原生JS压缩图片,极其精简版》</a></p>
<blockquote>
<ol>
<li>什么是base64格式?说到底就是一串字符串,形如data:image/png;base64,iVBORwO…开头的字符串</li>
<li>原本在网页中嵌入一个图片是这样的<code>&lt;img src="photo.png"&gt;</code></li>
<li>使用了base64格式后变成<code>&lt;img src="data:image/png;base64,iVBORw0..."&gt;</code></li>
<li><strong>所以,通过FileReader对象就可以把图片变成base64格式,内嵌至网页中,这样就可以减少对服务器的请求,不过网页体积变大,这个方法适用于嵌入小张图片</strong></li>
</ol>
</blockquote>
<h2><a name="t0"></a><a id="1_6"></a>1.核心使用方法(这是固定搭配)</h2>
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.signin(event)" style="position: unset;">let fileObj = document.getElementById('file').files[0]  //获取文件对象
let reader = new FileReader()   //新建一个FileReader对象

reader.readAsDataURL(fileObj)   //将读取的文件转换成base64格式

reader.onload = function(e) {
    console.log(e.target.result)    //转换后的文件数据存储在e.target.result中
}
//onload在readAsDataURL执行后执行
<div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre>
<h2><a name="t1"></a><a id="2demohtml_18"></a>2.最精简的一个demo(复制到html文件就能运行)</h2>
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.signin(event)" style="position: unset;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;压缩图片demo&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
	&lt;img id="img" src=""&gt;
	&lt;input id="file" type="file" οnchange="Tobase64()"&gt;
&lt;/body&gt;

&lt;script&gt;
//转换格式为base64
function Tobase64() {
    let fileObj = document.getElementById('file').files[0]  //获取文件对象
    let reader = new FileReader()   //新建一个FileReader对象
    reader.readAsDataURL(fileObj)   //将读取的文件转换成base64格式
    reader.onload = function(e) {
        document.getElementById('img').src = e.target.result    //将img标签的src换成base64格式,并显示出来
    }
}
&lt;/script&gt;
&lt;/html&gt;
<div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li></ul></pre>

                                    </div>
                <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-095d4a0b23.css" rel="stylesheet">
                    </div>
    </article>