Next.js Discord

Discord Forum

[next/og] getting a jpeg of the image

Answered
Great black wasp posted this in #help-forum
Open in Discord
Great black waspOP
hi, i'm trying to generate an image with some text on it (not for OG purposes) so that i can post it with a bot afterwards. the problem is that in its current form the api returns a png, and the instagram api that i'm trying to call asks for a jpeg.

this is how i'm building the image
export const GET = async () => {
  try {
    //...
    return new ImageResponse(
      (
        <span style={{
          wordWrap: 'break-word',
          height: '100%',
          width: '100%',
          backgroundColor: backgroundColor,
          fontSize: '52px',
        }}>
          <b style={{
            height: '100%',
            width: '100%',
            wordWrap: 'break-word',
            wordBreak: 'break-all',
            color: textColor,
            fontFamily: '"Comic"',
          }}>{text}</b>
        </span>

      ),
      {
        width: 1080,
        height: 1080,
        fonts: [
          {
            name: 'Comic',
            data: fontData,
            style: 'normal',
          },
        ],
      },
    );
  } catch (error) {
    //...
  }
}
Answered by American Crow
it most likely is the wrong tool for the job.
I am not an image manipulation expert.
I'd guess you could do use some lib like sharp e.g.

// care half pseudo code
function convertPngToJpg(imageBuffer) {
  return sharp(imageBuffer).jpeg({options}).toBuffer()
}
View full answer

8 Replies

Great black waspOP
and then i have this method that connects to instagram and should post the image

import { IgApiClient } from 'instagram-private-api';
import { get } from 'request-promise';
import { env } from "~/env";



export const postImage = async () => {
  try {
    const ig = new IgApiClient();
    ig.state.generateDevice(env.IG_USERNAME);
    const auth = await ig.account.login(env.IG_USERNAME, env.IG_PASSWORD);
    // console.log(JSON.stringify(auth));

    // getting random square image from internet as a Buffer
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const imageBuffer = await get({
      url: 'https://picsum.photos/800/800', // random picture with 800x800 size
      encoding: null, // this is required, only this way a Buffer is returned
    }) as Buffer;

    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const imageBuffer2 = await get({
      url: 'http://localhost:3000/api/image', // random picture with 800x800 size
      encoding: null, // this is required, only this way a Buffer is returned
    }) as Buffer;


    const publishResult = await ig.publish.photo({
      file: imageBuffer2, // image buffer, you also can specify image from your disk using fs
      caption: 'test',
    });

    return publishResult;

  } catch (error) {
    throw error;
  }
}


imageBuffer works while imageBuffer2 doesn't
i have tried adding an export const contentType = 'image/jpeg' as per the docs, but it still doesn't seem to work
Great black waspOP
maybe i'm using the wrong tool for the job...
American Crow
it most likely is the wrong tool for the job.
I am not an image manipulation expert.
I'd guess you could do use some lib like sharp e.g.

// care half pseudo code
function convertPngToJpg(imageBuffer) {
  return sharp(imageBuffer).jpeg({options}).toBuffer()
}
Answer
American Crow
Let me know if that works. I am interested myself. :q
@American Crow it most likely is the wrong tool for the job. I am not an image manipulation expert. I'd guess you could do use some lib like `sharp` e.g. tsx // care half pseudo code function convertPngToJpg(imageBuffer) { return sharp(imageBuffer).jpeg({options}).toBuffer() }
Great black waspOP
it actually worked... hahaha

const res = await sharp(imageBuffer2).jpeg().toBuffer();

though i'm curious if it will even work when deployed, considering the max bundle size of 500kb and the fact that request-promise and sharp on their own take more than half of that max bundle size according to vscode
@American Crow haha thats wild. yea don't deploy that shit 😄 but interesting nevertheless
Great black waspOP
i probably will try to deploy it anyway 😄 it's a goof project for an instagram version of a twitter bot, so I'll just be scheduling the og api call with a cron job and not actually do anything with the site