JS實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64示例詳解

更新時(shí)間：2023年03月31日 09:09:02 作者：春風(fēng)_同學(xué)

這篇文章主要為大家介紹了JS實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景介紹

最近有個(gè)需求是將部分DOM生成圖片上傳到服務(wù)器，這里就直接用之前項(xiàng)目使用的 html-to-image。

然而，這次與上次不同的是有一個(gè)圖片；其實(shí)，html-to-image也支持了存在圖片的DOM生成截圖(embed-images)。

出現(xiàn)意外

不出意外的就該出意外了：

很容易理解，就是跨域了請(qǐng)求了。注意，這里本來之前使用img標(biāo)簽是能正常請(qǐng)求的，并且也不用加crossorigin屬性。 在調(diào)用html-to-image中加上mode: 'no-cors'依然不行。

進(jìn)入正題吧

然后就想自己搞轉(zhuǎn)base64吧，各種百度谷歌出來了

const image2Base64 = (url: string) => new Promise((resolve, reject) => {
  if (!url) {
    resolve('');
    return;
  }
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = url;
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx?.drawImage(img, 0, 0);
    const data = canvas.toDataURL();
    resolve(data);
  };
  img.onerror = () => {
    reject('');
  };
});

特別需要注意的是：img標(biāo)簽屬性是crossorigin，new Image需使用crossOrigin。如果不設(shè)置crossOrigin會(huì)造成另一個(gè)問題：

在用canvas調(diào)用toDataURL方法中出錯(cuò)了。

然后又是各種百度谷歌，發(fā)現(xiàn)MDN有個(gè)權(quán)威又無語的解釋：

提煉一下哈：指定crossorigin的圖像，在canvas調(diào)用中不會(huì)出現(xiàn)tainted錯(cuò)誤。

其實(shí)上面已經(jīng)能解決大多數(shù)的問題了：

對(duì)，沒猜錯(cuò)，事情沒有絕對(duì)的，還是有個(gè)例的：

不知是這個(gè)圖片服務(wù)器咋設(shè)置的，各種吧啦吧啦溝通也不給設(shè)置跨域白名單啥的，只能自己想辦法了。

nodejs中間層轉(zhuǎn)

const http = require('http');
http.get(url, (res) => {
  const chunks = [];
  let size = 0;
  res.on('data', (chunk) => {
    chunks.push(chunk);
    size += chunk.length;
  });
  res.on('end', () => {
    const data = Buffer.concat(chunks, size);
    const base64Data = data.toString('base64');
    return base64Data;
  });
});

結(jié)果，完美解決。