How can I upscale images programmatically without restriction to image size for my nextjs project?

Options
Sky
Sky Member Posts: 3
edited May 20 in Developer APIs

I am building an AI image and video editing web app using nextjs. Based on the AI image feature I would like the cloudinary api upscale feature to upscale any images irrespective of the image size. How do I achieve that? Here is the cloudinary api uspscale feature code am using in my project "import { upscale } from "@cloudinary/url-gen/actions/effect";
// Initialize Cloudinary instance  const cld = new Cloudinary({    cloud: {      cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME    }  });
  // Apply the upscale effect 
const transformedImage = cld.image(image?.publicId).effect(upscale()); 
const transformedImageUrl = transformedImage.toURL();
// Use useEffect to set the transformed image URL 
useEffect(() => {    if (setTransformedImageUrl) {      setTransformedImageUrl(transformedImageUrl);    }  }, [transformedImageUrl, setTransformedImageUrl]);" With the above code I could upscale small size images but I want to improve and make sure it upscales any images irrespective of the image size. I will be expecting your feedback on this. Thanks in advance.

Tagged:

Answers

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 135 admin
    Options

    Hi there,

    Thanks for reaching out.

    It is also recommended to use automatic quality and automatic format transformations, which can help manage both the quality and bandwidth usage. For example - using it in a delivery URL:

    https://res.cloudinary.com/demo/image/upload/e_upscale,f_auto,q_auto/docs/tall-hall.jpg

    Additionally, you may also check the following links for more information:

    https://github.com/cloudinary-community/next-cloudinary
    https://cloudinary.com/documentation/transformation_reference#examples_f_auto
    https://cloudinary.com/documentation/transformation_reference#examples_q_quality_type

    Hope this helps. Please let me know if you have any further questions.

    Best regards,

    Eric

    Helpful Links For You
    💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
    🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
    📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
    📰 Check out the Cloudinary blog for the latest company news and insights

  • Sky
    Sky Member Posts: 3
    Options

    Thanks for your feedback Eric and I so much appreciate your answer, but the links you provided doesn't work for my use case. I am building a nextjs web app that involves upscale feature on image upload I got this cloudinary api upscale code " import { upscale } from "@cloudinary/url-gen/actions/effect" new CloudinaryImage("me/upscale-sign-1").effect(upscale());";" and the code works but there is an issue because it can't upscale images with big sizes I mean in height and width and it can upscale smaller image sizes perfetly. I want the upscale feature to upscale any images irrespective of the image size. Here is my code for upscaling " "use client";
    import { dataUrl, debounce, download, getImageSize } from '@/lib/utils';import { upscale } from "@cloudinary/url-gen/actions/effect";import { Cloudinary } from "@cloudinary/url-gen";import { PlaceholderValue } from 'next/dist/shared/lib/get-img-props';import Image from 'next/image';import React, { useEffect } from 'react';
    interface TransformedImageProps {  image: any; // You should replace `any` with the actual type of `image`  type: string;  title: string;  transformationConfig: any; // You should replace `any` with the actual type of `transformationConfig`  isTransforming: boolean;  setIsTransforming: (value: boolean) => void;  hasDownload?: boolean;  setTransformedImageUrl: (url: string) => void; // Add this line}
    const TransformedImageUpscale: React.FC<TransformedImageProps> = ({  imagetypetitletransformationConfigisTransforming,  setIsTransforming,  hasDownload = false,  setTransformedImageUrl // Add this line}) => {
      // Initialize Cloudinary instance  const cld = new Cloudinary({    cloud: {      cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME    }  });
      // Apply the upscale effect  const transformedImage = image    ? cld.image(image?.publicId).effect(upscale())    : null;  const transformedImageUrl = transformedImage?.toURL() ?? '';
      // Use useEffect to set the transformed image URL  useEffect(() => {    if (setTransformedImageUrl && transformedImageUrl) {      setTransformedImageUrl(transformedImageUrl);    }  }, [transformedImageUrl, setTransformedImageUrl]);
      const downloadHandler = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {    e.preventDefault();    download(transformedImageUrl, title);  }
      if (!image) {    return <div>No image data available.</div>;  }
      return (    <div className="flex flex-col gap-4">      <div className="flex-between">        <h3 className="h3-bold text-purple-600">          Upscaled        </h3>
            {hasDownload && (          <button             className="download-btn"             onClick={downloadHandler}          >            <Image               src="/assets/icons/download.svg"              alt="Download"              width={24}              height={24}              className="pb-[6px]"            />          </button>        )}      </div>
          {image?.publicId && transformationConfig ? (        <div className="relative">          <Image             width={getImageSize(type, image, "width")}            height={getImageSize(type, image, "height")}            src={transformedImageUrl}            alt={image.title || "Transformed image"} // Ensure alt attribute is provided            sizes={"(max-width: 767px) 100vw, 50vw"}            placeholder={dataUrl as PlaceholderValue}            className="transformed-image"            onLoad={() => {              setIsTransforming && setIsTransforming(false);            }}            onError={() => {              debounce(() => {                setIsTransforming && setIsTransforming(false);              }, 8000)()            }}          />
              {isTransforming && (            <div className="transforming-loader">              <Image                 src="/assets/icons/spinner.svg"                width={50}                height={50}                alt="spinner"              />              <p className="text-white/80">Please wait...</p>            </div>          )}        </div>      ) : (        <div className="transformed-placeholder">          Upscale Image Frame        </div>      )}    </div>  )}
    export default TransformedImageUpscale;
    " I will be looking forward to your response and everyone's response concerning this issue. Thanks in advance.

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 135 admin
    Options

    Hi,

    I checked the logs, and you are hitting the maximum megapixel limit which is 25MP for free accounts and thus you are getting the error InvalidTransformation: Image is too large for e_upscale (more than 25 megapixels)

    Hopefully this helps.

    Regards,
    Akshay

    Helpful Links For You
    💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
    🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
    📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
    📰 Check out the Cloudinary blog for the latest company news and insights

  • Sky
    Sky Member Posts: 3
    Options

    Thanks for your swift response @Akshay. Does that mean if I upgrade the code would upscale any images irrespective of their sizes? Does that mean the code works as it should and it's just that restriction is placed in free account right?

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 108
    Options

    Hi @Sky.

    Not exactly. If you were to upgrade, the maximum megapixel limit would still be in place, but it would be set to a higher threshold, letting you upload/create larger images. For specific megapixel limits, please see https://cloudinary.com/pricing/compare-plans

    Kind regards,
    -Danny