no worries at all. still a very new API. we are figuring this out together. thanks a ton for the help!
1 Like
i’ve now tried posting to images/edits/ with a b64 transparent mask in conjunction with a b64 image, but still get bad request error. i’ve tried without a mask as well, no dice.
my whole idea is to create a ‘cover’ image, then use that image to generate images for a story book’s individual pages. i feel like it shouldn’t be as difficult as i’m making it out to be, but the docs really don’t give much help in terms of how to programmatically post a ‘valid png’
i’ve also tried converting the b64_json response from image/generations to a PNG file using javascripts ‘File’ class, but i’m still getting no where
update: i’m fairly certain i’m sending the correct data in my request now, but i’m getting the following error:
‘Uncaught (in promise) TypeError: localVarFormParams.getHeaders is not a function’
i’ve spent a good amount of time googling solutions, but nothing really seems to work. here’s my request:
export const fetchEdits = async (image, prompt) => {
const mask = await getBase64();
const imageFile = dataType64toFile(image, "image");
const maskFile = dataType64toFile(mask, "mask");
const response = await openai.createImageEdit(
imageFile,
maskFile,
prompt,
1,
"256x256"
);
return response.data.data[0]["url"];
};
export const dataType64toFile = (b64Data, filename) => {
const mime = "image/png";
const bstr = atob(b64Data);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const newFile = new File([u8arr], filename, {
type: mime,
});
return newFile;
};
export const getBase64 = () => {
const img = document.getElementById("mask") as any;
const canvas = document.getElementById("canvas") as any;
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext("2d");
if (context && img) {
img.onload = () => {
context.drawImage(img, 0, 0);
};
}
const dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png);base64,/, "");
};
and here’s what the error looks like in dev tools console:
has anyone out there figured out this particular use case yet? i’d be thrilled to finally get this figured out 
Sorry for stupid question, but are you using Node or Typescript or something else?
I have some notes for handling the image bit in various languages. They haven’t been tested - but they may help you
not a stupid question at all! i’m using react with typescript, and i’d be absolutely thrilled with anything you can share
OK, so casting may be part of your problem.
OpenAI requires you to cast things as Any when you pass images. It is a Typescript specific issue.
Here are two code snippets.
Like I said, they are untested and they are from a course I am working on.
But the key thing with this slide is that Typescript is the same as Node but it requires the “Any” casting
Snippet 1: (This is for an edit with a mask and refers back to a file)
const response = await openai.createImageEdit(
fs.createReadStream(“sunlit_lounge.png”) as any,
fs.createReadStream(“mask.png”) as any,
“A sunlit indoor lounge area with a pool containing a flamingo”,
1,
“1024x1024”
);
Here is snippet 2 - (It uses binary data - it is for a variation image - but the way you need to recast the buffer to a new object with type any and then you also need to name the new object is important. If you don’t use the name, it also tends to fail)
// This is the Buffer object that contains your image data
const buffer: Buffer = [your image data];
// Cast the buffer to any so that we can set the name property
const file: any = buffer;
// Set a name that ends with .png so that the API knows it’s a PNG image
file.name = “image.png”;
const response = await openai.createImageVariation(
file,
1,
“1024x1024”
);
Hope it helps
i appreciate the help, because you’re clarifying things i was unsure about. after diving back in, i’ve concluded that i don’t think this is my root issue (sadly)… i’m pretty sure sending an API request with the ‘image’ paramater as data from an open ai API response is triggering a CORS issue. my guess is that my api key would be exposed in the image data, thus visible to the front end(??)
it’s a bummer because i was hoping to use js to programmatically create story books. a cover image would be created first, then several others created through the images/edits endpoint, using the cover image as a ‘home base’. but i don’t think i can do it without creating a db to store the image, or a backend API to call open ai as a third party API, or something along those lines(??)
hopefully open AI can do something in the future to make this use case easier to achieve, and if it’s already possible (which i’m sure is likely the case) that the docs be refreshed for future development
It’s even easier! You just need to tell it to originally send the binary…
Each image can be returned as either a URL or Base64 data, using the response_format parameter. URLs will expire after an hour.
Note to @logankilpatrick — sent a chat to help about broken link in the API docs… points to localhost rather than the page…
It looks like this is fixed now on this page: OpenAI API
Let me know if it is still an issue on your end @PaulBellow
1 Like
Looks fine here now. Raf responded a while back.
Happy New Year. We’ve been trying to hold down the fort, so to speak. 
1 Like
i’m still encountering issues with this endpoint. i’m now passing my PNGs exactly like the reference in the docs, but i’m getting
error: { code: null, message: "Invalid input image - format must be in ['RGBA', 'LA', 'L'], got 1.", param: null, type: 'invalid_request_error' }
Did you try the solution up-thread?
@PaulBellow yes. those return ‘message: ‘Uploaded image must be a PNG and less than 4 MB.’’, which is even further away from the last error i posted
There is another recent post in the community that may relevant. It talks about the file being 24 bit vs 32 bit PNG files.
My understanding is that the file.name setting in my example above is important in Typescript. It helps the AI understand that it is a valid PNG file. I suspect you may need to give your image and mask buffers names, and also cast them as type any
1 Like
didnt mean to tag you in that last reply, sorry raymon. thanks for the help, but it isn’t working for me sadly
1 Like
Do you have your code with the changes made?
i’m not even getting a useful error message anymore
Can you cast while calling a function?
I would set it up like one of the two examples above…
Also, you’re not setting image.name so it’s certain it’s a PNG… might be the problem?
Can you upload the image and mask you’re using?
Are they 24bit or 32bit PNGs?
Is the normal generation endpoint working for you?
ETA: Might also try casting and setting up the images within the function?
1 Like
Can you also give us the console.log output for the response object (remove any sensitive info first)
If that is what is in the second image you posted, then response is undefined at the time the log is being called
1 Like