Error: Unsupported image type

h2022m commented 2 years ago

Error: Unsupported image type at setSource (/Users/Usr/Documents/nft codiing/hashlips_art_engine-1.1.2_patch_v1/node_modules/canvas/lib/image.js:91:13) at Image.set (/Users/Usr/Documents/nft codiing/hashlips_art_engine-1.1.2_patch_v1/node_modules/canvas/lib/image.js:62:9) at /Users/Usr/Documents/nft codiing/hashlips_art_engine-1.1.2_patch_v1/node_modules/canvas/index.js:34:15 at new Promise () at loadImage (/Users/Usr/Documents/nft codiing/hashlips_art_engine-1.1.2_patch_v1/node_modules/canvas/index.js:23:10) at /Users/Usr/Documents/nft codiing/hashlips_art_engine-1.1.2_patch_v1/src/main.js:184:25 at new Promise () at Usr (/Users/Usr/Documents/nft codiing/hashlips_art_engine-1.1.2_patch_v1/src/main.js:183:10) at /Users/Usr/Documents/nft codiing/hashlips_art_engine-1.1.2_patch_v1/src/main.js:364:31 at Array.forEach ()

servusas commented 2 years ago

same here

noobyogi0010 commented 2 years ago

Hi, @h2022m Can you please provide more details about how this error occurred? It will be great if you could share the steps to reproduce this issue.

bolshoytoster commented 2 years ago

Canvas (the library HashLips uses to load images) only supports PNG, GIF, JPEG, SVG and BMP formats. If you weren't using any of them you should convert your images.

williamszeto commented 2 years ago

Hi, I have the same error message. I've made sure all my layers are .png, and for testing purposes I've made them all 2000x2000 px. It goes as far as creating a single image then errors out with "(process:20408): GLib-GIO-WARNING **: 10:52:33.366: Unexpectedly, UWP app Evernote.Evernote_10.29.7.0_x86__q4d96b2w5wcc2' (AUMIdEvernote.Evernote_q4d96b2w5wcc2!Evernote') supports 1 extensions but has no verbs Created edition: 1, with DNA: 2be22cac7c064114ef6c324ee4ff7df3f93cfbe2" then "Error: Unsupported image type". Any ideas? thanks.

bolshoytoster commented 2 years ago

@williamszeto

"(process:20408): GLib-GIO-WARNING **: 10:52:33.366: Unexpectedly, UWP app Evernote.Evernote_10.29.7.0_x86__q4d96b2w5wcc2' (AUMId Evernote.Evernote_q4d96b2w5wcc2!Evernote') supports 1 extensions but has no verbs

I don't think this error is related to hashlips, it comes from evernote.

If you shared your config/layers directory I could try to track the bug down. You could make a new github repository and put your project directory in it.

williamszeto commented 2 years ago

its weird, that it mention Evernote. I'm about to uninstall it to see if it helps. Thanks. Here's the layers: config.zip .

bolshoytoster commented 2 years ago

@h2022m @servusas @williamszeto what did you use to make the images, it could be related to that.

williamszeto commented 2 years ago

Photoshop 2022. The original image was a 3D render - but I re-did the file as a clean RGB, 16-bit, 2000x2000 px, .png

Xanph commented 2 years ago

Hi All,

Been trying to figure this one out for the past several hours as I too am getting this error

Created edition: 10, with DNA: XXXX
Created edition: 11, with DNA: XXXX
Created edition: 12, with DNA: XXXX
B:\XXXX\XXXX\XXXX\XXXX\Art Engine\node_modules\canvas\lib\image.js:91
  SetSource.call(img, src);
            ^

Error: Unsupported image type
    at setSource (B:\XXXX\XXXX\XXXX\XXXX\Art Engine\node_modules\canvas\lib\image.js:91:13)
    at Image.set (B:\XXXX\XXXX\XXXX\XXXX\Art Engine\node_modules\canvas\lib\image.js:62:9)
    at B:\XXXX\XXXX\XXXX\XXXX\Art Engine\node_modules\canvas\index.js:34:15
    at new Promise (<anonymous>)
    at loadImage (B:\XXXX\XXXX\XXXX\XXXX\Art Engine\node_modules\canvas\index.js:23:10)
    at B:\XXXX\XXXX\XXXX\XXXX\Art Engine\src\main.js:185:27
    at new Promise (<anonymous>)
    at loadLayerImg B:\XXXX\XXXX\XXXX\XXXX\Art Engine\src\main.js:184:12)
    at B:\XXXX\XXXX\XXXX\XXXX\Art Engine\src\main.js:368:31
    at Array.forEach (<anonymous>)

Prerequisites

I'm using the latest version of Adobe Illustrator and VS code, as well as the latest version of Art Engine. I have seven layers, but also have a second layer configuration which I commented out for the most part. Been using both npm run generate and npm run index.js - same thing but worth the mention.
All my beginning images are at 1000x1000px, RGB Colour mode, 300 ppi.
All files are located on my B Disk which is a network drive. No bandwidth issues were experienced.

Here is my tried and tested list:

Checked all are PNGs.
Run all PNGs through https://compresspng.com/ to see if that would help quick fix any formatting issues.
Checked config.js format width and height matches my 1000x1000 px
Trial and error for each layer folder pair to narrow down to the offending image - turns out no matter what each folder still causes the issue.
Tested one image in one layer against 28 images in a second layer - still causes issues, and then narrowed down to each image. Still caused an issue - at random; so testing one image would fail, then testing that same image a second time and it would not fail.
Knowing that I had made 29 images active I adjusted the grow edition sizes. When set to 10, it was fine, when set to 20 it would allow some infrequent error throwing (of the error we're discussing), and at 30 it will 4/4 times throw the error.
Re-exported my Adobe Illustrator Artboards for each image at 300 ppi.
Re-exported my Adobe Illustrator Artboards for each image at 150 ppi.
Re-exported my Adobe Illustrator Artboards for each image at 4 ppi.
Re-exported my Adobe Illustrator Artboards for each image at 300 ppi with interlacing on.
Re-exported my Adobe Illustrator Artboards for each image at 150 ppi with interlacing on.
Tested on version 1.1.1
Tested on version 1.1.0
Lastly, turned my computer on and off (lol).

On each occurrence, this error appears randomly. Due to this erratic behaviour and because I have thoroughly "cleaned the images" I'm not sure this is the appropriate error for what is actually happening.

If this error was the actual problem, it would be great if the error message would contain the attempted images - and their directories when debugLogs is set to true.

I have no idea what to do now, but I am hoping Hashlips can give this the kiss of life we all need.

Any questions, let me know!

bolshoytoster commented 2 years ago

@Xanph thank you for testing this, you could try changing line 27 in package.json fron "canvas": "^2.8.0", to "canvas": "^2.9.0",. Then delete the node_modules folder and run yarn install/npm install again.

If this error was the actual problem, it would be great if the error message would contain the attempted images - and their directories when debugLogs is set to true.

I've added this in my fork, you could check which files are causing the problem with that.

Xanph commented 2 years ago

@bolshoytoster I just made the change to 2.9.0 nothing different there.

Will take a look at your fork, thanks for implementing that.

bolshoytoster commented 2 years ago

@Xanph if you find which files cause the problem could you send one so I can try to track the bug down.

Xanph commented 2 years ago

@bolshoytoster the plot thickens...

growEditionSizeTo: 50 is set

I checked out your fork and turned on debug mode as mentioned. Using your trait types in the terminal, I went through each layer one by one, deleting the images where the value was shown. I did this until there was one image left in each layer. That way I'm no longer including images that are supposedly working in the test.

So now I have 7 layers with one image in them.

When I run the program then, sometimes it will immediately show the unsupported image type error, but then other times it will show that it has written metadata for the image and then spam "DNA exists!" until it then throws the error Unsupported image type.

Now I'll comment out each layer one by one and see what happens. For this, I'll reduce growEditionSizeTo to 25 only so the terminal does not overflow any debug messages due to DNA exists message. I'm also deleting the build folder in between each run.

Each time I get a debug log message, we'll see that as a success.

Commenting out my background layer I can't see any debug info as there appears to be an infinite DNA Exists loop that overflows the terminal, even when adjusting to size 10 for edition size. At the end of the terminal, it says You need more layers or elements to grow your edition to 10 artworks!
Commenting out the base layer I got the debug log message, then DNA exists and then the error. Build folder contained one created image.
Commenting out the 3rd, 4th, 5th, 6th, and 7th layers, generated the same result as the last bullet point.

Not too sure where to go from there as it's a bit erratic. But what I will do is start the trial and error process from the beginning again to see if I get any different results. If I do, I will post about them here in the next two hours.

If there is nothing from me, hopefully, this helps to narrow down the problem? Let me know if it does/doesn't 🙂

-- I will add, that I have looked at hidden files and the 'Thumbs.db' file is in some of the folders. I made sure all folders were clear from this file and the error does still happen. So no causes from that file being read.

bolshoytoster commented 2 years ago

@Xanph something else, you’ll have to manually delete the build/ directory since my fork will continue on from the previous build. I could probably add a config for this.

Xanph commented 2 years ago

@Xanph something else, you’ll have to manually delete the build/ directory since my fork will continue on from the previous build. I could probably add a config for this.

Haha yes I noticed. But factored that in

Bakhshi007 commented 2 years ago

@h2022m Check all of your images make sure they are all the same type Like :PNG JPG, if all of your images shows PNG type then download Image converter and upload all of your images those if there is problem with the images it will give you an error of cant upload the image then you will know which of your images have problem and make or export them again for me I have done the mentioned method and Solved the issue. and you can use AVS.Image.Converter Hope it will be helpful.

Regards FB

Xanph commented 2 years ago

@Bakhshi007 just gave this a go with AVS Image Converter, no luck on that.

I'm going to start looking again into Canvas's specific colour requirements.

@h2022m @servusas @williamszeto - have you found anything?

Xanph commented 2 years ago

I'm proud to have found a temporary solution to this problem that is being caused by the canvas library being picky and also not correctly checking/handling accepted file types.

Here is your to-do list to get your NFTs generated:

Check all images are of the supported types e.g. PNG, JPG.
Within Windows File Explorer (or your explorer) of each of your layer folders, right-click the row names to show the drop-down, then click more.
Then check the dimensions box:
You'll then see the dimensions of each PNG image like so:
Make sure each image is the same dimension as each other and the same as other images in your other layer folders. For example, the dimensions of all of my images must be 4167x4167
If they are not, use this amazing app https://www.iloveimg.com/resize-image#resize-options,pixels to resize your images.
When resizing the image, select "By pixels". Type in your required dimensions, mine are 4167x4167 and then uncheck the "Maintain Aspect Ratio" box (if it is already checked). Your's should be formatted like below.
Then replace all of your layer PNGs with the ones you have downloaded from the site. Make sure all old images are deleted before moving in the new ones just to ensure there is no contamination.
Ensure any other file type(s) like "Thumbs.db" are not in your layer folders. This is critical. If there are other files in there, it will cause Canvas to mess up again. So please ensure the folder only contains the supported image files. If you are on Windows, enable hidden files by looking at the ribbon, clicking the "view" drop-down and then selecting show>hidden items. You should then see all hidden files that should be erased.
Your images should now process!

If after each run the program still fails, go back and check your layer folders for the hidden items to ensure they are removed - they sometimes reappear. Then ensure you do not access the layer files before/during operation because this may encourage the hidden files to re-appear.

If you are still having trouble, you may like to try my settings:

In config.js

Set const debugLogs = true;

const format = {
width: 1000,
height: 1000,
smoothing: false,
};

This has been tested on 4000 images.

Dev recommendations

Ensure image file errors are handled nicely and provide more detail on the file type that was unsupported.
Only read/open supported image file types.
Pre-scan image dimensions to ensure they are the same. If they are not, list which images (with directories) need to be corrected and state that they need to be corrected because of the dimension mismatch.
Debug log should show attempted image details before the program crashes. This will save a lot of time when tracking down individual image issues.

Happy NFT generating, I really hope this helps.

bolshoytoster commented 2 years ago

@Xanph

I've added a slightly better error.
I can either make it only open files with a certain extension (png, jpeg, bmp, pdf, svg, xml). But this can cause problems if the user changes the extension. I could try to load the image, and if it succeeds, include it. I could speed the generator up this way, only loading each image once instead of each time it's used, but it would end up using more memory.
Dimensions don't seem to be a problem for me, it might be something else (my repo uses a slightly newer version of canvas (2.9.0)).
I think 1. covers this.

Xanph commented 2 years ago

If you're error could have the extra specificity of the exact image that caused the error to throw, that would be perfect - particularly on the logging side.
As this is for the images, I'd restrict it to the image types that canvas supports. Would be interesting to trial out memory usage on large use cases. As that would be useful to have. But maybe it's more of a nice have?
Hmmm interesting, Hashlips should be updated to that version of Canvas if that is what would solve the dimension issue.

bolshoytoster commented 2 years ago

@Xanph

It does (it's Error loading image: + whatever error canvas gave + path to the image that failed)

Xanph commented 2 years ago

Ah sorry, @bolshoytoster I didn't notice it when I tried.

bolshoytoster commented 2 years ago

@Xanph probably using an older version.

khyyle commented 2 years ago

@bolshoytoster i made all of my images using a website called pixilart.io and then exported all of my images as .png. After running into some issues I ran them all through a png converter and image resizer to be safe, yet it has not worked at all. could my issue be related to the fact that i used pixilart.io and not adobe ps?

ghost commented 2 years ago

I solved it by activating the option to show hidden system files and deleting the file called desktop.ini that was inside in one of the layer folders.

AwkwardEffect commented 2 years ago

I solved it by activating the option to show hidden system files and deleting the file called desktop.ini that was inside in one of the layer folders.

Wish i would've found this an hour ago. I only just figured out that was my issue when I looked at the file tree in my text editor, instead of looking in file explorer.

powderedbread commented 2 years ago

I copied my the main folder to another location and then this got fixed for me. I didn't have any size errors. It had something to do with changing windows accounts for some reason. Hopefully that helps someone if they run into this problem.

Whether or not that's -the- solution, the problem for seemed like it started immediately after I saved an image into one of the layers folders from another computer.

bolshoytoster commented 2 years ago

@breadcola you probably had a non-ascii character in the first account's name.

powderedbread commented 2 years ago

@breadcola you probably had a non-ascii character in the first account's name.

Maybe, one had an underscore in it. Also, I didn't see that desktop.ini comment. I didn't try that but I'm guessing that might be the real solution.

AwkwardEffect commented 2 years ago

Figured out that the hidden .ini files that windows puts in was the problem. It kept trying to read it as a layer file. I removed those and have had no further issue.

cryptodeveloperbro commented 2 years ago

load the image folders in something like WINDIRSTAT the file deletion program, its free. Windows doesnt always show hidden files like "thumbs.db" so you can DELETE them using this program, it 100% fixes the issue

HashLips / hashlips_art_engine