victorquanlam / cryptopunk-nft-generator Goto Github PK

Hi,

I extended standard collection by adding new trait types with PNG images made in Adobe Photoshop. It seems like my files are unsupported by canvas. I get 'Error: Unsupported image type' at drawImage (/cryptopunk-nft-generator/index.js:101:27), .

I compared files that I made with the standard ones and saw some differences that can be the reason. I am mostly concerned about Resolution, Print size and Units. I also wonder what is the reason for such significant size difference between these 2 files. Did you encounter such issues before?

My png file:

Image:
Filename: ciggareteclassic.png
Format: PNG (Portable Network Graphics)
Mime type: image/png
Class: DirectClass
Geometry: 24x24+0+0
Resolution: 37.8x37.8
Print size: 0.634921x0.634921
Units: PixelsPerCentimeter
Colorspace: sRGB
Type: PaletteAlpha
Base type: Undefined
Endianness: Undefined
Depth: 8-bit
Channel depth:
Red: 8-bit
Green: 8-bit
Blue: 8-bit
Alpha: 8-bit
Channel statistics:
Pixels: 576
Red:
min: 143 (0.560784)
max: 255 (1)
mean: 253.554 (0.994329)
median: 255 (1)
standard deviation: 11.3377 (0.0444615)
kurtosis: 78.998
skewness: -8.75387
entropy: 0.0884987
Green:
min: 0 (0)
max: 255 (1)
mean: 252.684 (0.990918)
median: 255 (1)
standard deviation: 17.058 (0.066894)
kurtosis: 104.779
skewness: -9.37562
entropy: 0.0884427
Blue:
min: 0 (0)
max: 255 (1)
mean: 252.226 (0.98912)
median: 255 (1)
standard deviation: 21.4986 (0.0843082)
kurtosis: 101.709
skewness: -9.64306
entropy: 0.0964019
Alpha:
min: 0 (0)
max: 255 (1)
mean: 4.55208 (0.0178513)
median: 0 (0)
standard deviation: 30.6758 (0.120297)
kurtosis: 53.678
skewness: 7.26621
entropy: 0.0727769
Image statistics:
Overall:
min: 0 (0)
max: 255 (1)
mean: 190.754 (0.748055)
median: 191.25 (0.75)
standard deviation: 20.1425 (0.0789902)
kurtosis: -0.661727
skewness: -1.1472
entropy: 0.0865301
Alpha: srgba(255,255,255,0) #FFFFFF00
Colors: 15
Histogram:
4: (143,143,143,0) #8F8F8F00 srgba(143,143,143,0)
1: (143,143,143,68) #8F8F8F44 srgba(143,143,143,0.266667)
1: (191,191,191,0) #BFBFBF00 srgba(191,191,191,0)
1: (191,191,191,94) #BFBFBF5E srgba(191,191,191,0.368627)
1: (226,226,226,135) #E2E2E287 srgba(226,226,226,0.529412)
1: (226,226,226,0) #E2E2E200 srgba(226,226,226,0)
1: (226,226,226,147) #E2E2E293 srgba(226,226,226,0.576471)
1: (226,226,226,123) #E2E2E27B srgba(226,226,226,0.482353)
1: (226,226,226,139) #E2E2E28B srgba(226,226,226,0.545098)
1: (255,0,0,255) #FF0000FF red
2: (255,132,0,255) #FF8400FF srgba(255,132,0,1)
555: (255,255,255,0) #FFFFFF00 srgba(255,255,255,0)
4: (255,255,255,255) #FFFFFFFF white
1: (255,255,255,93) #FFFFFF5D srgba(255,255,255,0.364706)
1: (255,255,255,38) #FFFFFF26 srgba(255,255,255,0.14902)
Rendering intent: Perceptual
Gamma: 0.454545
Chromaticity:
red primary: (0.64,0.33)
green primary: (0.3,0.6)
blue primary: (0.15,0.06)
white point: (0.3127,0.329)
Matte color: grey74
Background color: white
Border color: srgb(223,223,223)
Transparent color: none
Interlace: None
Intensity: Undefined
Compose: Over
Page geometry: 24x24+0+0
Dispose: Undefined
Iterations: 0
Compression: Zip
Orientation: Undefined
Properties:
date:create: 2021-11-02T21:50:37+00:00
date:modify: 2021-11-02T14:13:12+00:00
png:IHDR.bit-depth-orig: 8
png:IHDR.bit_depth: 8
png:IHDR.color-type-orig: 6
png:IHDR.color_type: 6 (RGBA)
png:IHDR.interlace_method: 0 (Not interlaced)
png:IHDR.width,height: 24, 24
png:pHYs: x_res=3780, y_res=3780, units=1
png:sRGB: intent=0 (Perceptual Intent)
signature: e7f965c05ce79f960e3a19b1b71fd2ac9989c68f833839aca98584edee46431c
Artifacts:
verbose: true
Tainted: False
Filesize: 204B
Number pixels: 576
Pixels per second: 554041P
User time: 0.000u
Elapsed time: 0:01.001
Version: ImageMagick 7.1.0-12 Q16-HDRI x86_64 2021-10-25 https://imagemagick.org

Standard png file:

Image:
Filename: cigarette.png
Format: PNG (Portable Network Graphics)
Mime type: image/png
Class: DirectClass
Geometry: 24x24+0+0
Resolution: 28.35x28.35
Print size: 0.846561x0.846561
Units: PixelsPerInch
Colorspace: sRGB
Type: PaletteAlpha
Base type: Undefined
Endianness: Undefined
Depth: 8-bit
Channel depth:
Red: 8-bit
Green: 8-bit
Blue: 8-bit
Alpha: 8-bit
Channel statistics:
Pixels: 576
Red:
min: 0 (0)
max: 255 (1)
mean: 248.345 (0.973904)
median: 255 (1)
standard deviation: 38.3086 (0.15023)
kurtosis: 36.8919
skewness: -6.16777
entropy: 0.141537
Green:
min: 0 (0)
max: 255 (1)
mean: 248.111 (0.972985)
median: 255 (1)
standard deviation: 38.8546 (0.152371)
kurtosis: 35.0178
skewness: -6.00828
entropy: 0.141537
Blue:
min: 0 (0)
max: 255 (1)
mean: 248.019 (0.972624)
median: 255 (1)
standard deviation: 39.2877 (0.154069)
kurtosis: 34.2894
skewness: -5.9593
entropy: 0.141537
Alpha:
min: 0 (0)
max: 255 (1)
mean: 9.74479 (0.0382149)
median: 0 (0)
standard deviation: 47.1645 (0.184959)
kurtosis: 21.5315
skewness: 4.79385
entropy: 0.184351
Image statistics:
Overall:
min: 0 (0)
max: 255 (1)
mean: 188.555 (0.739432)
median: 191.25 (0.75)
standard deviation: 40.9038 (0.160407)
kurtosis: -0.781766
skewness: -1.09773
entropy: 0.152241
Alpha: srgba(255,255,255,0) #FFFFFF00
Colors: 5
Histogram:
13: (0,0,0,255) #000000FF black
5: (198,198,198,255) #C6C6C6FF srgba(198,198,198,1)
6: (221,221,221,128) #DDDDDD80 srgba(221,221,221,0.501961)
1: (226,91,38,255) #E25B26FF srgba(226,91,38,1)
551: (255,255,255,0) #FFFFFF00 srgba(255,255,255,0)
Rendering intent: Perceptual
Gamma: 0.454545
Chromaticity:
red primary: (0.63999,0.33001)
green primary: (0.3,0.6)
blue primary: (0.15,0.05999)
white point: (0.31269,0.32899)
Matte color: grey74
Background color: white
Border color: srgb(223,223,223)
Transparent color: none
Interlace: None
Intensity: Undefined
Compose: Over
Page geometry: 24x24+0+0
Dispose: Undefined
Iterations: 0
Compression: Zip
Orientation: TopLeft
Profiles:
Profile-xmp: 14350 bytes
Properties:
date:create: 2021-11-02T21:41:48+00:00
date:modify: 2021-11-02T13:30:13+00:00
dc:format: image/png
photoshop:ColorMode: 3
png:cHRM: chunk was found (see Chromaticity, above)
png:IHDR.bit-depth-orig: 8
png:IHDR.bit_depth: 8
png:IHDR.color-type-orig: 6
png:IHDR.color_type: 6 (RGBA)
png:IHDR.interlace_method: 0 (Not interlaced)
png:IHDR.width,height: 24, 24
png:pHYs: x_res=2835, y_res=2835, units=1
png:sRGB: intent=0 (Perceptual Intent)
signature: b40cd384ac7261fc41bcbb8fa8e3d08708bf5ef7e715388a72362ea84d203e7a
tiff:XResolution: 720000/10000
tiff:YResolution: 720000/10000
xmp:ColorSpace: 65535
xmp:CreateDate: 2021-09-04T14:58:58+10:00
xmp:CreatorTool: Adobe Photoshop CC 2015 (Windows)
xmp:MetadataDate: 2021-09-04T15:15:27+10:00
xmp:ModifyDate: 2021-09-04T15:15:27+10:00
xmp:PixelXDimension: 24
xmp:PixelYDimension: 24
xmpMM:DocumentID: xmp.did:360514aa-4c57-8447-8597-b6adb1bda980
xmpMM:InstanceID: xmp.iid:360514aa-4c57-8447-8597-b6adb1bda980
xmpMM:OriginalDocumentID: xmp.did:360514aa-4c57-8447-8597-b6adb1bda980
Artifacts:
verbose: true
Tainted: False
Filesize: 14578B
Number pixels: 576
Pixels per second: 320577P
User time: 0.010u
Elapsed time: 0:01.001
Version: ImageMagick 7.1.0-12 Q16-HDRI x86_64 2021-10-25 https://imagemagick.org

So it looks like on line 57 u call an object out of nowhere. arraysToCombine Is this a trick repo or something where u dont want to just give away an answer or what? how is it that I can copy your entire code and it dosnt work?

I came across this error while installing dependencies packages in my MacBook:

$ npm install
npm ERR! code 1
npm ERR! path /Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | arm64
npm ERR! node-pre-gyp info check checked for "/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas/build/Release/canvas.node" (not found)
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v93 ABI, unknown) (falling back to source compile with node-gyp) 
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.9 found at "/opt/homebrew/opt/[email protected]/bin/python3.9"
npm ERR! gyp info spawn /opt/homebrew/opt/[email protected]/bin/python3.9
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/carloberd/Library/Caches/node-gyp/16.13.2/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/carloberd/Library/Caches/node-gyp/16.13.2',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/carloberd/Library/Caches/node-gyp/16.13.2/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! /bin/sh: pkg-config: command not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 21.2.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"
npm ERR! gyp ERR! cwd /Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v8.3.0
npm ERR! gyp ERR! not ok 
npm ERR! node-pre-gyp ERR! build error 
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! node-pre-gyp ERR! System Darwin 21.2.0
npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /Users/carloberd/dev/nft/cryptopunk-nft-generator/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v16.13.2
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.8
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/carloberd/.npm/_logs/2022-01-28T13_16_38_056Z-debug.log

Node and npm versions:

$ node -v
v16.13.2

$ npm -v
8.1.2

This problem doesn't occur on Windows with earlier npm and node versions.

It seems like this is missing some traits like "Big Shades" and "Nerd Glasses." Is this right? No pressure to add them as this is great and free, I'm just curious if I'm missing something.

Thanks!

I can't see where I can set the limit of a certain trait not to execute more than a certain time.

What is a good way to create larger imageFormat without sacrificing resolution? I'm assuming the traits would need to be dynamic or recreated to support a larger output size?

Would be awesome to figure out how to create custom sizes.

Now I'm a little new to this but the code works really well, it's just that when I try to add my own pictures it doesn't generate any copies with them, how do I fix this?