【分享+散分】动态(gif)、静态图片转换成DataURL(base64编码)格式

ambit_tsai-微信 2018-08-01 10:10:16

引用

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

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



data:[<mediatype>][;base64],<data>



如：”data:image/png;base64,iVBORw0KGgoAAA…”

转换远程图片
借助canvas的toDataURL方法
1. 通过Image对象或是img元素发起请求，不存在跨域问题；
2. 由于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方法
1. 通过fetch或是ajax发起请求，受跨域问题限制；
2. 该方法可以转换任意文件，不仅仅是图片。

使用fetch



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);

使用ajax



$.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>

散分：7月份又得了朵红花，照例散分庆祝一下