动态(gif)、静态图片转换成DataURL(base64编码)格式

最新推荐文章于 2025-06-18 11:55:20 发布

ambit_tsai-微信

最新推荐文章于 2025-06-18 11:55:20 发布

阅读量8.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端日志文章标签： base64 动图转 gif 动态

本文链接：https://blog.youkuaiyun.com/ambit_tsai/article/details/80888899

前端日志专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何将动态和静态图片转换为DataURL（base64编码）格式。对于远程图片，可以利用canvas的toDataURL方法（仅限静态图片）或结合fetch与FileReader的readAsDataURL方法；对于本地图片，可以通过input标签配合FileReader来完成转换。涉及到的技术包括fetch、jQuery的ajax、canvas以及Data URLs。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DataURL简介

Data URLs，即为前缀为 data：scheme 的URL，其允许内容创建者向文档中嵌入小文件。
Data URLs 由四个部分组成：前缀（数据:)，指示数据类型的MIME类型，如果非文本则为可选的base64令牌，数据本身：

data:[<mediatype>][;base64],<data>
如：”data:image/png;base64,iVBORw0KGgoAAA…”

详见MDN Web技术文档：Data URLs

转换远程图片

借助canvas的toDataURL方法

通过Image对象或是img元素发起请求，不存在跨域问题；
由于canvas固有限制，该方法只能转换静态图片。

let img = new Image();
// 或者
// let img = document.createElement('img');
img.onload = function(){
    let canvas = document.createElement('canvas'),
        width = img.width,
        height = img.height;
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(img, 0, 0, width, height);
    console.log( canvas.toDataURL() );
    // => "data:image/png;base64,iVBORw0KGgoAAA..."
};
// 因Image的src一旦赋值，便立即发起请求，故onload应写在src之前
img.src = '/path/to/target.png';

借助FileReader的readAsDataURL方法

通过fetch或是ajax发起请求，受跨域问题限制；
该方法可以转换任意文件，不仅仅是图片。

使用异步交互新星fetch

使用fetch获取远程文件，再调用readAsDataURL方法将其转换DataURL数据

fetch('/path/to/target.gif')
    .then(respone => respone.blob())    // 将响应体转换成blob格式数据
    .then(blob => {
        let reader = new FileReader(); 
        reader.onloadend = function(){
          console.log(reader.result);   // 输出DataURL数据
        };
        reader.readAsDataURL(blob);     // 将blob数据转换成DataURL数据
    })
    .catch(console.error);

使用jQuery的ajax方法

ajax的用法与fetch相近，值得注意的是， XMLHttpRequest Level 2才支持设置响应数据类型为blob格式

$.ajax('/path/to/target.gif', {
        xhrFields: {
            responseType: 'blob'    // 指定响应数据类型为blob格式
        }
    })
    .then(blob => {
        let reader = new FileReader(); 
        reader.onloadend = function(){
          console.log(reader.result);
        };
        reader.readAsDataURL(blob);
    })
    .catch(console.error);

转换本地图片

通过input标签获取本地文件，再借助readAsDataURL方法将其转换成DataURL数据

<input type="file" onchange="toDataURL(this)" />
<script type="text/javascript">
    function toDataURL(el){
        let reader = new FileReader(); 
        reader.onloadend = function(){
            console.log(reader.result);
        };
        reader.readAsDataURL(el.files[0]);  // el.files[0]为选中的文件
    }
</script>