如何将 SvelteKit 获取响应转换为缓冲区？

Question

我有一个简单的节点脚本来获取 tif 图像，使用 sharp 将图像转换为 jpeg 并生成数据：image/jpeg;浏览器的 base64 src。原因是在不支持tif/tiff图像的浏览器中启用tiff图像。

在节点中这很好用。

import sharp from "sharp";
import fetch from "node-fetch";

let link =
  "https://people.math.sc.edu/Burkardt/data/tif/at3_1m4_01.tif";

// fetch tif image and save it as a buffer
async function fetchTifBuffer(link) {
  const tifImg = await fetch(link);
  const buffer = await tifImg.buffer();
  return buffer;
}

// convert to png image save to buffer and save as base64
async function tifToPngToBase64(link) {
  let inputImgBuffer = await fetchTifBuffer(link);
  const buff = await sharp(inputImgBuffer).toFormat("jpeg").toBuffer();
  let base64data = buff.toString("base64");
  let imgsrc = "data:image/jpeg;base64," + base64data.toString("base64");
  console.log(imgsrc);
  // use in browser  <img src="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAY ...==" alt="image" />
}

tifToPngToBase64(link);

我想在 SvelteKit 中实现它。但我不知道如何从 SvelteKit 获取响应中获取缓冲区。有什么想法吗？

Answer 1

好的，所以我自己弄明白了。 SvelteKit 获取响应有一个 arrayBuffer，所以只需要将 arraybuffer 转换为缓冲区。

这是相关的 SvelteKit 端点：

// img.js
import sharp from "sharp";

export const get = async () => {
  const res = await fetch(
    "https://people.math.sc.edu/Burkardt/data/tif/at3_1m4_01.tif"
  );
  const abuffer = await res.arrayBuffer();

  const buffer = Buffer.from(new Uint8Array(abuffer));
  const buff = await sharp(buffer).toFormat("jpeg").toBuffer();
  let base64data = buff.toString("base64");

  let src = `data:image/jpeg;base64,${base64data.toString("base64")}`;
  let img = `<img style='display:block; width:100px;height:100px;' id='base64image'
       src='${src}' />`;
  return {
    body: {
      img,
    },
  };
};

这是使用端点的 SvelteKit 组件：

// img.svelte
<script>
  export let img;
</script>

{@html img}

如何将 SvelteKit 获取响应转换为缓冲区？

How to convert SvelteKit fetch response to a buffer?

buffer

sveltekit