浏览器环境下图片的格式转换 浏览器环境下图片的格式转换不了

本文所有的代码均运行于chrome最新版本（81.0.4044.138）。

从 http链接 得到 base64

我们知道互联网上图片的大部分存在形式都是图片链接，而base64是一种用64个可打印字符表示二进制数据的表示方法。它可以表示图片数据。

base64的优势在他不占用网络请求数。经常用于迷你图片集的表示。

在浏览器端如何将图片链接转换为base64呢？答案就在于下面的代码。

const img = new Image();
// 支持跨域，同时要求服务端的支持（Accept-Control-Cross-Origin）
img.crossorigin = 'anonymous';
img.onload = getDataUrl;
// 请求图片
img.src='图片链接'

function getDataUrl(event) {

  const canvas = document.createElement('canvas');
  // 设置画布大小
  canvas.width = img.width；
  canvas.height = img.height;
  
  const ctx = canvas.getContext('2d');
  // 绘制
  ctx.drawImage(img, 0, 0);
  // 转换成base64
  const dataUrl = canvas.toDataURL()
  console.log(dataUrl);
}

相似地，还有 cavas.toBlob canvas.getImageData 有兴趣的可以自行探索。

从 base64 得到 可用于文件上传的File对象。

base64转换成文件，实际上就是6个比特位为一个单元的存储方式转化为二进制存储，浏览器有丰富的api支持。stackoverflow上这个答案写的很有意思，可以看一下。

https://stackoverflow.com/a/38935990

从 File对象到 base64

浏览器提供FileReader api，读取File对象或Blob对象（实际上File继承了Blob，也很有趣），并异步地输出base64数据。

const reader = new FileReader();
reader.addEeventListener('load', ()=> {
	console.log(reader.result); // 异步输出结果（base64）
});
reader.readAsDataURL(file) // 开始读取文件