\n Original\n

\n ${\n methods.map((method) => `\n

\n ${method.replace(/_/g, \" \").toUpperCase()}\n

\n `).join(\"\")\n }\n

\n`,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}",[],[181],{"_106":188,"_99":189,"_153":190,"_155":-5,"_156":139,"_157":138,"_159":120,"_108":191,"_103":33,"_161":192,"_163":70,"_165":27,"_166":-5,"_167":193,"_102":194},"5353776e-0b17-11f0-b5bb-569c3dd06744","sdfsdf","53537854-0b17-11f0-b5bb-569c3dd06744",["D",1743085525855],"script",[],[189],"files",[150,170,179,187],"counts",{"_199":33,"_200":174,"_201":33,"_202":33},"pulls","branches","forks","envVars","contents",[205,208,211,214],{"_106":151,"_99":152,"_153":154,"_155":-5,"_156":139,"_157":158,"_159":120,"_108":206,"_103":94,"_161":162,"_163":164,"_165":27,"_166":-5,"_102":207},["D",1743025556232],[152],{"_106":171,"_99":172,"_153":173,"_155":-5,"_156":139,"_157":174,"_159":120,"_108":209,"_103":33,"_161":162,"_163":176,"_165":27,"_166":-5,"_102":210},["D",1743021853915],[172],{"_106":180,"_99":181,"_153":118,"_155":-5,"_156":139,"_157":122,"_159":120,"_108":212,"_103":94,"_161":183,"_163":184,"_165":27,"_166":-5,"_102":213},["D",1743025486180],[181],{"_106":188,"_99":189,"_153":190,"_155":-5,"_156":139,"_157":138,"_159":120,"_108":215,"_103":33,"_161":192,"_163":70,"_165":27,"_166":-5,"_102":216},["D",1743085525855],[189],"upstream",{"_106":219,"_99":100,"_114":-5,"_115":220,"_112":113,"_21":221},"6e7e45d2-0a68-11f0-b578-569c3dd06744","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b6b18643-c908-40b9-2575-5a1c900b5800/square512",{"_97":222,"_134":223},"maxm","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJnTEtkSHlOMWxWZm1GRHdKYUVTNklYM3FpdiJ9","screenshots",{"_226":227,"_228":229},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=3&url=https%3A%2F%2Fcharmaine--38db5a7565b24469994fdde83d99f4fd.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=3&url=https%3A%2F%2Fcharmaine--38db5a7565b24469994fdde83d99f4fd.web.val.run","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":233,"_237":238,"_286":33,"_287":27},{"_106":107,"_99":100,"_108":234,"_110":-5,"_111":27,"_112":113,"_114":-5,"_115":-5,"_12":116,"_117":118,"_119":120,"_121":122,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":235,"_136":236},["D",1743021853915],{"_97":98,"_134":135},{"_103":138,"_99":43,"_106":139,"_140":107,"_141":142,"_143":144,"_145":113,"_146":147},"history",[239,244,249,257,265,270,277],{"_153":190,"_103":138,"_108":240,"_156":139,"_195":241},["D",1743085525855],[242],{"_106":188,"_156":139,"_153":190,"_99":189,"_163":70,"_161":192,"_103":33,"_155":-5,"_108":240,"_157":138,"_166":-5,"_159":120,"_165":27,"_102":243},[189],{"_153":154,"_103":158,"_108":245,"_156":139,"_195":246},["D",1743025556232],[247],{"_106":151,"_156":139,"_153":154,"_99":152,"_163":164,"_161":162,"_103":94,"_155":-5,"_108":245,"_157":158,"_166":-5,"_159":120,"_165":27,"_102":248},[152],{"_153":154,"_103":250,"_108":251,"_156":139,"_195":252},5,["D",1743025547315],[253],{"_106":254,"_156":139,"_153":154,"_99":152,"_163":255,"_161":162,"_103":174,"_155":-5,"_108":251,"_157":250,"_166":-5,"_159":27,"_165":27,"_102":256},"ad54d398-0a8b-11f0-b85a-569c3dd06744","# PNG Dithering\n\nA tool that applies dithering effects to PNG images using the [Monke library](https://www.val.town/x/maxm/monke) (fixed and hosted on Val Town)\n\nMade by [Max](https://www.val.town/u/maxm) using the [monke](https://github.com/retraigo/monke) library.",[152],{"_153":154,"_103":258,"_108":259,"_156":139,"_195":260},4,["D",1743025492182],[261],{"_106":262,"_156":139,"_153":154,"_99":152,"_163":263,"_161":162,"_103":33,"_155":-5,"_108":259,"_157":258,"_166":-5,"_159":27,"_165":27,"_102":264},"8c77dc4c-0a8b-11f0-bbb6-569c3dd06744","# ditherPng",[152],{"_153":118,"_103":122,"_108":266,"_156":139,"_195":267},["D",1743025486180],[268],{"_106":180,"_156":139,"_153":118,"_99":181,"_163":184,"_161":183,"_103":94,"_155":-5,"_108":266,"_157":122,"_166":-5,"_159":120,"_165":27,"_102":269},[181],{"_153":118,"_103":94,"_108":271,"_156":139,"_195":272},["D",1743021862558],[273],{"_106":274,"_156":139,"_153":118,"_99":181,"_163":275,"_161":183,"_103":174,"_155":-5,"_108":271,"_157":94,"_166":-5,"_159":27,"_165":27,"_102":276},"190c174e-0a83-11f0-b23e-569c3dd06744","import { createCanvas, loadImage } from \"https://deno.land/x/canvas/mod.ts\";\nimport { Color, getPixels, Image, quantizeByMedianCut } from \"https://esm.town/v/maxm/monke/mod.ts\";\n\nconst methods = [\n \"floyd_steinberg\",\n \"sierra_2\",\n \"sierra_lite\",\n \"quick\",\n \"bidirectional\",\n];\n\nasync function getImage(url: string) {\n const data = await fetch(url).then((e) => e.arrayBuffer()).then((e) => new Uint8Array(e));\n const image = await loadImage(data);\n\n const canvas = createCanvas(image.width(), image.height());\n\n const ctx = canvas.getContext(\"2d\");\n\n ctx.drawImage(image, 0, 0, canvas.width, canvas.height);\n const d = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n return new Image(d, canvas.width, canvas.height);\n}\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const imgUrl = url.searchParams.get(\"url\")\n || \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4fac0ab4-147f-47e1-a407-7d6b39d0ef00/public\";\n if (url.pathname === \"/original.png\") {\n return fetch(\n imgUrl,\n );\n }\n if (url.pathname === \"/dithered.png\") {\n // const canvas = createCanvas(200, 200);\n // const ctx = canvas.getContext(\"2d\");\n\n // ctx.fillStyle = \"red\";\n // ctx.fillRect(10, 10, 200 - 20, 200 - 20);\n // const d = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n const image = await getImage(\n imgUrl,\n );\n image.dither([\"#000000\", \"#ffffff\"].map((e) => new Color(e)), {\n method: methods.find((e) => e === url.searchParams.get(\"method\")) || methods[0],\n });\n const i = createCanvas(image.width, image.height);\n\n const ctx2 = i.getContext(\"2d\");\n\n const data = image.toImageData();\n\n ctx2.putImageData(data, 0, 0);\n return new Response(i.toBuffer(\"image/png\"), {\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n }\n\n return new Response(\n `\n\n\n

\n Original\n

\n ${\n methods.map((method) => `\n

\n ${method.replace(/_/g, \" \").toUpperCase()}\n

\n `).join(\"\")\n }\n

\n`,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}",[181],{"_153":173,"_103":174,"_108":278,"_156":139,"_195":279},["D",1743021853915],[280,282],{"_106":171,"_156":139,"_153":173,"_99":172,"_163":176,"_161":162,"_103":33,"_155":-5,"_108":278,"_157":174,"_166":-5,"_159":120,"_165":27,"_102":281},[172],{"_106":283,"_156":139,"_153":118,"_99":181,"_163":184,"_161":183,"_103":33,"_155":-5,"_108":284,"_157":174,"_166":-5,"_159":27,"_165":27,"_102":285},"13e9cc3e-0a83-11f0-9975-569c3dd06744",["D",1743021853915],[181],"page","hasNext","routes/_app","actionData","errors"]

History