I've developed a straightforward API that fetches an image, performs transformations on it, and is supposed to return the modified image. Currently, I can only return a base64 string representation of the image. However, I'm unsure how to return it as an actual image that would effortlessly render in the browser.
For example, if I input this link into the browser, the image displays correctly. What I aim for is to prepend my own URL (e.g. for testing
https://localhost:3000/api/images/remote/[URL]The code snippet below illustrates how I currently retrieve the base64 string of the new image:
const response = await fetch(URL)
// perform transformations
const arrayBuffer = await response.arrayBuffer()
const buffer = Buffer.from(arrayBuffer)
const base64 = buffer.toString("base64")
return base64
Though this approach allows me to successfully display the base64 string within an <img> tag, I am uncertain about how to convert it into an actual image object that will render directly in the browser without being displayed as a base64 string.
I understand that the solution might entail properly setting headers on the response and returning a blob, but despite thorough research via Google, I haven't been able to find a clear answer.