javascript 获取图像并创建 base64

Question

我正在使用 CloudFlare 服务工作者，我想获取图像然后生成它的 base64 表示。

所以像这样：

const res = await fetch('https://cdn.cnn.com/cnnnext/dam/assets/211010073527-tyson-fury-exlarge-169.jpg')
  const blob = await res.blob();
  
  console.log(blob)
  console.log(btoa(blob))

这当然行不通，有什么解决办法吗？

Answer 1

使用 cloudflare 使用 btao

完成工作脚本

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

const imageUrl =
  'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/' +
  'Cat_playing_with_a_lizard.jpg/1200px-Cat_playing_with_a_lizard.jpg';

function base64Encode (buf) {
  let string = '';
  (new Uint8Array(buf)).forEach(
      (byte) => { string += String.fromCharCode(byte) }
    )
  return btoa(string)
}

function base64Decode (string) {
  string = atob(string);
  const
    length = string.length,
    buf = new ArrayBuffer(length),
    bufView = new Uint8Array(buf);
  for (var i = 0; i < length; i++) { bufView[i] = string.charCodeAt(i) }
  return buf
}

async function handleRequest(request) {
  const
    upstreamResponse = await fetch(imageUrl),
    text = base64Encode(await upstreamResponse.arrayBuffer()),
    bin = base64Decode(text);
  
  return new Response(bin, {status: 200, headers: {
      'Content-type': upstreamResponse.headers.get('Content-type')
    }})
}

也可以参考这个discussion

javascript 获取图像并创建 base64

javascript fetch an image and create base64

javascript

base64

service-worker

cloudflare