Nuxt•4mo ago

need help with (Jimp.read) error for my image conversion webpage.

I am working on a small project JPEG to PNG conversion webpapge and i am facing an error which I need help with. The backend code in convert.post.ts is having a read error. here is the code the line consisting this (^) is where the error is . Also the image with error message.

import { H3Event, readMultipartFormData } from 'h3'
const Jimp =(await import('jimp')).default
import { writeFile, mkdir } from 'fs/promises'
import { join } from 'path'
import { randomUUID } from 'crypto'

export default defineEventHandler(async (event: H3Event) => {
    const form = await readMultipartFormData(event)

    const imageFile = form?.find(f => f.name === 'image')
    if (!imageFile || !imageFile.data) {
        return { error: 'No image uploaded' }
    }

    const id = randomUUID()
    const inputBuffer = imageFile.data

    try {
(^)        const image = await Jimp.read(inputBuffer)
        const outputPath = join('public', 'converted')
        const outputFilename = `${id}.png`
        const outputFilePath = join(outputPath, outputFilename)

        await mkdir(outputPath, { recursive: true })
        await image.writeAsync(outputFilePath)

        return {
            url: `/converted/${outputFilename}`
        }
    } catch (err) {
        return {
            error: 'Failed to convert image',
            details: (err as Error).message
        }
    }
})

import { H3Event, readMultipartFormData } from 'h3'
const Jimp =(await import('jimp')).default
import { writeFile, mkdir } from 'fs/promises'
import { join } from 'path'
import { randomUUID } from 'crypto'

export default defineEventHandler(async (event: H3Event) => {
    const form = await readMultipartFormData(event)

    const imageFile = form?.find(f => f.name === 'image')
    if (!imageFile || !imageFile.data) {
        return { error: 'No image uploaded' }
    }

    const id = randomUUID()
    const inputBuffer = imageFile.data

    try {
(^)        const image = await Jimp.read(inputBuffer)
        const outputPath = join('public', 'converted')
        const outputFilename = `${id}.png`
        const outputFilePath = join(outputPath, outputFilename)

        await mkdir(outputPath, { recursive: true })
        await image.writeAsync(outputFilePath)

        return {
            url: `/converted/${outputFilename}`
        }
    } catch (err) {
        return {
            error: 'Failed to convert image',
            details: (err as Error).message
        }
    }
})

5 Replies

kapa.ai•4mo ago

Hi @✨Xavier✨. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain any information about using Jimp or resolving Jimp.read errors in a Nuxt (or Nitro) server API route. The sources cover image handling in Nuxt, such as using the Nuxt Image module, serving static assets, and error handling in Nuxt, but do not address backend image processing with Jimp or similar libraries. If you need help with Jimp integration in a Nuxt server route, you may want to consult the official Jimp documentation or seek advice on forums specific to Node.js image processing. If you have a Nuxt-specific question (such as serving the converted image or integrating with Nuxt's API routes), please clarify, and I'll do my best to help based on the available Nuxt documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@551461024687980545> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AGill•4mo ago

Looks like the Jimp import is not resolving properly. Why do you need to await the import like that? Can't you use esm import like this?

import { Jimp } from 'jimp';

import { Jimp } from 'jimp';

✨Xavier✨OP•4mo ago

I tried that but It doesn't import it like esm. Shows the errors: String literal expected Vue; Strong literal expected After searching the issue I found out that jimp is a commonJS lib. It doesn't work directly with nuxt3 esm module. So I have been searching alternatives and even using chat gpt for some hints but haven't been able to make it work

AGill•4mo ago

I'm importing as esmodule in my project installed used pnpm add jimp

Gaming

Programming

need help with (Jimp.read) error for my image conversion webpage.

Did you find this page helpful?