如何使用JavaScript将图像转换为Base64字符串？

FileReader

来自MDN
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（
或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中 File 对象可以是来自用户在一个元素上选择文件后返回的FileList对象，
也可以来自拖放操作生成的 DataTransfer对象，
还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

理解

从MDN了解到，FileReader读取文件，需要File或Blob格式
File又可以是input和canvas

input方案

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();
		
      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + 
        				document.getElementById("imgTest").innerHTML);
      }
      
      //把这个blob或者file，转化为base64字符串，
      //是异步的，监听onload 的回掉函数拿结果
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>

canvas方案

const sliceBase64Header = (base64String: string) =>
  base64String.replace(/^data:image\/[a-z]{3,4};base64,/, '');

通过canvas var img = "imgurl";

function getBase64Image(img) {
	var canvas = document.createElement("canvas");
	canvas.width = img.width;
	canvas.height = img.height;
	var ctx = canvas.getContext("2d");
	ctx.drawImage(img, 0, 0, img.width, img.height);
	var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
	//canvas.toDataURL这个API就是把canvas对象转化为base64数据
	var dataURL = canvas.toDataURL("image/"+ext);
	return dataURL;
}

	var image = new Image();
	image.src = img;
	//设置跨域
	image.crossOrigin = 'Anonymous';
	image.onload = function(){
		var base64 = getBase64Image(image);
		console.log(base64);
	}
    image.onerror = function (err) {
        reject(err);
      };