Dominant Color from Image

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_192":193,"_194":195},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_68":139,"_40":-7,"_140":-5,"_17":141,"_142":143,"_144":145,"_146":147,"_148":149,"_97":-5,"_150":151,"_152":153,"_154":46,"_155":156,"_157":26,"_158":-5,"_159":-5,"_160":161},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","stevekrouse","name","getColor","branchName","main","project",{"_32":55,"_13":14,"_34":101,"_44":-5,"_102":26,"_47":48,"_103":48,"_104":-5,"_105":-5,"_106":107,"_108":75,"_109":26,"_110":-5,"_111":-5,"_112":95,"_51":113,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_127":128,"_129":130,"_131":28,"_45":46},"ahead",80,"behind",67,"diff",{"_60":61,"_62":63,"_64":65},"hasChanges",true,"sourceBranch",{"_40":20,"_13":16,"_32":54,"_38":55,"_41":33,"_42":56,"_57":48,"_58":39,"_59":52,"_53":14,"_49":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":22,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_47":48,"_49":50,"_51":52,"_53":14},"pull","id","3134af58-2779-11f0-b46e-569c3dd06744","createdAt",["D",1746206191850],"updatedAt",["D",1714889789875],"projectId","3134560c-2779-11f0-b46e-569c3dd06744","version","forkedBranchId","forkedBranchVersion","lockfileKey","deletedAt","isOwned",false,"privacy","public","userHandle","dctalbot","orgId","70f6238b-8c6a-454f-bd01-6807d747401e","projectName","6b7c4a10-25f1-11f0-ad23-569c3dd06744","6b7c0dc0-25f1-11f0-ad23-569c3dd06744",0,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[66,67],"deleted",[],"modified",[],{"_68":91,"_70":-7,"_71":92},{"_68":69,"_70":-7,"_71":72},"path","main.tsx","targetFile","sourceFile",{"_32":73,"_13":69,"_74":75,"_76":-5,"_77":54,"_78":20,"_79":26,"_34":80,"_40":81,"_82":83,"_84":85,"_62":46,"_86":-5,"_87":-7,"_68":88,"_89":90},"6c9830f8-25f1-11f0-ad23-569c3dd06744","fileId","6b7e00ee-25f1-11f0-ad23-569c3dd06744","parentId","branchId","branchVersion","latest",["D",1714739951094],79,"fileType","http","content","/** @jsxImportSource npm:hono@3/jsx */\nimport { Hono } from \"https://esm.sh/hono@3\";\n\nconst EXAMPLE_URL = \"https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg\";\nconst PERCENT_COVERAGE = 10; // lower is faster, but higher is more accurate\n\nfunction getPixelIndex(numToRound) {\n // Each pixel is 4 units long: r,g,b,a\n const remainder = numToRound % 4;\n if (remainder == 0) return numToRound;\n return numToRound + 4 - remainder;\n}\n\nexport async function getColor(src: string = EXAMPLE_URL): Promise {\n const { default: Jimp } = await import(\"npm:jimp\");\n const image = await Jimp.read(src);\n const store = {};\n const total_pixels = image.bitmap.width * image.bitmap.height;\n const coverage = total_pixels * PERCENT_COVERAGE / 100;\n const data = image.bitmap.data;\n const max_pixel_index = total_pixels - 1;\n\n for (let i = 0; i < coverage; ++i) {\n const x = getPixelIndex(Math.floor(Math.random() * max_pixel_index));\n const key = `${data[x]},${data[x + 1]},${data[x + 2]}`;\n const val = store[key];\n store[key] = val ? val + 1 : 1;\n }\n const rgb_code = Object.keys(store).reduce((a, b) => store[a] > store[b] ? a : b);\n return `rgb(${rgb_code})`;\n}\n\nconst template = (children) => (\n \n \n Dominant Color from Image\n \n

Compare

Mergestevekrouse/mainintodctalbot/main

README.md+3-0

Hmain.tsx+87-0