Download the image #10

deadcoder0904 · 2021-10-07T13:29:21Z

deadcoder0904
Oct 7, 2021

I've been trying to get it to work but having unfortunate errors.

My api/og-image.ts looks like:

import React from 'react'
import ReactDOM from 'react-dom/server'
import { withOGImage } from 'next-api-og-image'

import OGImagePreview from '@/pages/og-image-preview'
import { OGImage, Author } from '@/types/index'

const html = async ({
	title,
	description,
	date,
	readingTime,
	slug,
	authors,
}: Record<keyof OGImage, string | string[] | any[]>): Promise<string> => {
	const el = React.createElement(OGImagePreview, {
		title: title as string,
		description: description as string,
		date: date as string,
		readingTime: readingTime as string,
		slug: slug as string,
		authors: authors as Author[],
	})

	const body = ReactDOM.renderToStaticMarkup(el)

	const baseCSS = `
		.font-alegreya {
			font-family: Alegreya;
		}
		.font-jetbrains {
			font-family: 'JetBrains Mono';
		}
	`

	return `
		<html>
			<head>
				<meta charset="utf-8" />
				<link rel="preconnect" href="https://fonts.googleapis.com" />
				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
				<link
					href="https://fonts.googleapis.com/css2?family=Alegreya:wght@800&display=swap"
					rel="stylesheet"
				/>
				<link
					href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
					rel="stylesheet"
				/>
				<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
				<style>${baseCSS}</style>
			</head>
			<body>
				${body}
			</body>
			<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
		</html>
	`
}

const nextApiOgImageConfig = {
	// 'Content-Type' HTTP header
	contentType: 'image/png',
	// 'Cache-Control' HTTP header
	cacheControl: 'max-age 3600, must-revalidate',
	// NOTE: Options within 'dev' object works only when process.env.NODE_ENV === 'development'
	dev: {
		// Whether to replace binary data (image/screenshot) with HTML
		// that can be debugged in Developer Tools
		inspectHtml: true,
	},
	html,
}

export default withOGImage<keyof OGImage>(nextApiOgImageConfig)

How do I download the image itself?

I was trying to use simple fetch & also ky but not sure how to download it:

import ky from 'ky'

import {
	getAllEssays,
	getAllTutorials,
	getAllSnippets,
	getAllTips,
	getEssayBySlug,
	getTutorialBySlug,
	getSnippetBySlug,
	getTipBySlug,
} from '@/utils/mdx'
import { siteMetadata } from '@/_data/index'

const { siteUrl } = siteMetadata

export const generateOGImage = () => {
	try {
		const essays = getAllEssays()
		const tutorials = getAllTutorials()
		const snippets = getAllSnippets()
		const tips = getAllTips()

		essays.forEach(async ({ slug }) => {
			const { meta, code } = await getEssayBySlug(slug)
			const { title, description = '', date, readingTime, authors } = meta
			let data = new URLSearchParams()
			data.append('title', title)
			data.append('description', description)
			data.append('date', JSON.stringify(date))
			data.append('readingTime', JSON.stringify(readingTime))
			data.append('slug', slug)
			data.append('authors', JSON.stringify(authors))

			const options = {
				method: `POST`,
				body: data,
			}

			fetch(`${siteUrl}/api/og-image`, options)
				.then((data) => {
					if (!data.ok) throw data

					console.log(data.body)
				})
				.catch((error) => {
					console.error(error)
				})

			const json = await ky
				.post('api/og-image', {
					prefixUrl: siteUrl,
					json: {
						title: meta.title,
						description: meta.description,
						date: meta.date,
						readingTime: meta.readingTime,
					},
				})
				.json()
			console.log(json)
		})
	} catch (e) {
		console.error(e)
	} finally {
	}
}

I want the image from this API to be downloaded. How do I do it?

Answered by neg4n

Oct 7, 2021

You can try something like that:

In api route (pages/api/ogimage.js):

import { withOGImage } from "next-api-og-image";

export default withOGImage({
  template: { html: ({ test }) => `<h1>${test}</h1>` },
  dev: { inspectHtml: false },
});

then in regular Next.js page (pages/test.js):

import fetch from "isomorphic-unfetch";

export default function TestPage({ image }) {
  const src = `data:image/png;base64,${image}`;
  return (
    <div>
      <img src={src} />
    </div>
  );
}

export async function getStaticProps() {
  const response = await fetch(
    "http://localhost:3000/api/ogimage?test=populated%20at%20build%20time"
  );

  const arrayBuffer = await response.arrayBuffer();
  const …

View full answer

neg4n · 2021-10-07T20:32:37Z

neg4n
Oct 7, 2021
Maintainer

You can try something like that:

In api route (pages/api/ogimage.js):

import { withOGImage } from "next-api-og-image";

export default withOGImage({
  template: { html: ({ test }) => `<h1>${test}</h1>` },
  dev: { inspectHtml: false },
});

then in regular Next.js page (pages/test.js):

import fetch from "isomorphic-unfetch";

export default function TestPage({ image }) {
  const src = `data:image/png;base64,${image}`;
  return (
    <div>
      <img src={src} />
    </div>
  );
}

export async function getStaticProps() {
  const response = await fetch(
    "http://localhost:3000/api/ogimage?test=populated%20at%20build%20time"
  );

  const arrayBuffer = await response.arrayBuffer();
  const base64 = Buffer.from(arrayBuffer, "base64").toString("base64");

  return {
    props: {
      image: base64,
    },
  };
}

Navigating to http://localhost:3000/test should have tag with image generated by the library. And it will be generated during the build-time! Hope that helps @deadcoder0904 =) Don't forget to mark discussion as answered if you manage to get your issue resolved! Cheers

11 replies

deadcoder0904 Oct 14, 2021
Author

@neg4n nice req.body seems like a cool option.

so do you mean doing as string? i've done that but it can't work for IReadTimeResults or Date as the first one is a json & for second one I tried .toString() but still errors haha.

And yes if you do have time, can you make my example work → https://github.com/deadcoder0904/got-image-buffer-to-disk?

I'll then try to reimplement it in my blog project & let you know if it works here :)

neg4n Oct 14, 2021
Maintainer

so do you mean doing as string? i've done that but it can't work for IReadTimeResults or Date as the first one is a json & for second one I tried .toString() but still errors haha.

You must not stringify your query but cast every single value separately to string.

Code from deadcoder0904/got-image-buffer-to-disk

lib/generate-og-image.ts

import fs from "fs";
import path from "path";
import got from "got";

const saveImageFromAPI = async (
  url: string,
  params: Record<string, string>,
  folderPath: string
) => {
  try {
    const resp = await got
      .post(url, {
        searchParams: {
          ...params,
        },
      })
      .buffer();
    fs.writeFileSync(path.join(folderPath, "og-image.jpeg"), resp);
  } catch (e) {
    console.error(e);
  }
};

export const generateOGImage = () => {
  try {
    const folderPath = "public/";

    const params = {
      title: "Hello OG Image",
      date: new Date(),
      someComplexData: {
        yeah: "super",
        thats: "epic",
        foo: {
          bar: 10,
        },
      },
    };

    const API_URL = `http://localhost:3000/api/og-image`;

    saveImageFromAPI(
      API_URL,
      {
        title: params.title,
        date: params.date.toString(),
        someComplexDataYeah: params.someComplexData.yeah,
        someComplexDataThats: params.someComplexData.thats,
        someComplexDataFooBar: `${params.someComplexData.foo.bar}`,
      },
      folderPath
    );
  } catch (e) {
    console.error(e);
  } finally {
  }
};

pages/og-image.ts

import { withOGImage } from "next-api-og-image";

export default withOGImage({
  html: ({
    title,
    date,
    someComplexDataYeah,
    someComplexDataThats,
    someComplexDataFooBar,
  }) =>
    `<h1>${title} ${date} ${someComplexDataYeah}} ${someComplexDataThats}${someComplexDataFooBar}</h1>`,
  dev: { inspectHtml: false },
});

if you want strongly typed query:

Screen.Recording.2021-10-14.at.13.03.41.mov

Result

@deadcoder0904

neg4n Oct 14, 2021
Maintainer

Also @deadcoder0904, make sure to check out https://github.com/neg4n/next-api-og-image/releases/tag/2.0.0 🤟🏻

deadcoder0904 Oct 15, 2021
Author

@neg4n the example you've given does not pass an object, it instead passes a string everytime while destructuring it like someComplexDataYeah, someComplexDataThats & someComplexDataFooBar.

I have an authors object which I want to pass & the authors has 2 properties: name & twitter. I want to pass that completely instead of individually as I have to do lots of string conversions which are not ideal. I think this is due to query params so #11 should probably fix it.

Here's my latest commit → deadcoder0904/got-image-buffer-to-disk@afa5471

See how I need to do a bunch of conversions & it still doesn't work for Date or authors field but yeah it does save to a file now.

So all I need is a way to send json or basically objects. That would make this project perfect :)

neg4n Oct 15, 2021
Maintainer

I'll implement option to pass properties in body soon. Also, I encourage you @deadcoder0904 to do some pull requests 😃 This discussion will be marked as answered since original question/problem has already been resolved. Cheers

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Download the image #10

{{title}}

Replies: 1 comment 11 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Download the image #10

deadcoder0904 Oct 7, 2021

Replies: 1 comment · 11 replies

neg4n Oct 7, 2021 Maintainer

deadcoder0904 Oct 14, 2021 Author

neg4n Oct 14, 2021 Maintainer

Result

neg4n Oct 14, 2021 Maintainer

deadcoder0904 Oct 15, 2021 Author

neg4n Oct 15, 2021 Maintainer

deadcoder0904
Oct 7, 2021

Replies: 1 comment 11 replies

neg4n
Oct 7, 2021
Maintainer

deadcoder0904 Oct 14, 2021
Author

neg4n Oct 14, 2021
Maintainer

neg4n Oct 14, 2021
Maintainer

deadcoder0904 Oct 15, 2021
Author

neg4n Oct 15, 2021
Maintainer