图片转base64

在 js-实现文档水印效果 中，用了 canvas.toDataURL将水印导出为为base64格式的字符串，用于作为容器背景。

接下来再介绍几种方式：

原文： https://blog.csdn.net/ambit_tsai/article/details/80888899

canvas

• 此方法只适用于静态图片
• 如果图片地址跨域，canvas.toDataURL() 会失败

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..."
};
img.src = '/path/to/target.png';

FileReader

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

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

input 标签

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