How to create ImageEdit from ImageData?

API
, ,
1

Hi, I am working with one application and wanted to create Edit an image. However, I have ImageData. I tried to convert ImageData in to .png image as described here “OpenAI Platform”.

const buffer = imageData;
buffer.name = “image.png”;

However, I am getting an error “image’ is the required property”. I tried many ways to resolve it but I could not. I am using JS. Anybody can help?

2

Best way I’ve found is to use the OpenAI library for image endpoints, especially editing.

If you show your code, we might be able to help more.

4

This is my code. I think, there is mistake in sending JSON data. I cannot figure it out.

  let buffer = imageData;
  buffer.name = 'image.png';

const sendHttpRequest = (method, url, data) => {
    return fetch(url, {
      method : method,
      body : JSON.stringify(data),
      headers: data? {"Content-Type": "multipart/form-data", "Authorization": "Bearer" + " " + api_key} : {}
    }).then(response => {
      if(response.status >= 400){
        return response.json().then(errResData => {
          const error = new Error('Something went wrong');
          error.data = errResData;
          throw error;
        });
      }
      console.log(response);
      return response.json();
    });
  };
  
  const sendData = (image,mask,query,n,size) => {
    sendHttpRequest("POST", "https://api.openai.com/v1/images/edits", {
      "image": image,
      "mask": buffer,
      "prompt": query,
      "n" : n,
      "size": size,
    }).then(responseData => {
      console.log(responseData);
    }).catch(err => {
      console.log(err, err.data);
    });
  };

I also tried to send data as a FormData but getting same error.

const form_data = new FormData();
form_data.append("image",image);
form_data.append("mask", buffer);
form_data.append("prompt", 'Change hair color to pink');
form_data.append("n",1);
form_data.append("size",'1024x1024');
5

At the end you found a way to solve this problem?

6

You must send a 32-bit png file, not buffered image raw data.

It is sent in multipart/form-data as image/png MIME

Javascript dox: https://github.com/mdn/content/blob/92435b5f26c680a2314d392ef06f479216f0b4dd/files/en-us/web/api/xmlhttprequest/using_xmlhttprequest/index.md#submitting-forms-and-uploading-files

7

You are right but I wanted to send buffered image not .png file.

8

I want to send the AI a sample of some cloth so it can feel which is softest for making a dress, but that is also not a data format that the API accepts.

9

I do not know that you can check softness from image or not but you can send imageData. It is written in their documentation.

10

you have to send images as a blobLike

formdata.append(‘image’, new Blob([buffer],{type:‘image/png’})