31:T587,viewof image = { const files = [ ["Beastie Boys", FileAttachment("beastie-boys.jpg")], ["Bohemian Rhapsody", FileAttachment("bohemian-rhapsody.jpg")], ["Buy a Boat Cat", FileAttachment("buy-a-boat-cat.jpg")], ["Is This a Pigeon", FileAttachment("is-this-a-pigeon.jpg")], ["Picard Annoyed", FileAttachment("picard-annoyed.jpg")], ["Picard Facepalm", FileAttachment("picard-facepalm.jpg")], ["Ludo - Sing Aloud 1", FileAttachment("Ludo - Meme top.png")], ["Ludo - Sing Aloud 2", FileAttachment("Ludo - Meme bottom.png")] ]; const form = html`

`; form.file.onchange = () => { form.select.value = "Other"; form.value = new Promise((resolve, reject) => { const image = new Image(); image.src = URL.createObjectURL(form.file.files[0]); image.onload = () => resolve(image); image.onerror = reject; }); form.dispatchEvent(new CustomEvent("input")); }; form.select.onchange = async () => { if (form.select.value === "Other") { form.file.click(); } else { form.value = files[form.select.selectedIndex][1].image(); form.dispatchEvent(new CustomEvent("input")); } }; form.select.selectedIndex = 6; form.select.onchange(); return form; }32:T588,viewof image2 = { const files = [ ["Beastie Boys", FileAttachment("beastie-boys.jpg")], ["Bohemian Rhapsody", FileAttachment("bohemian-rhapsody.jpg")], ["Buy a Boat Cat", FileAttachment("buy-a-boat-cat.jpg")], ["Is This a Pigeon", FileAttachment("is-this-a-pigeon.jpg")], ["Picard Annoyed", FileAttachment("picard-annoyed.jpg")], ["Picard Facepalm", FileAttachment("picard-facepalm.jpg")], ["Ludo - Sing Aloud 1", FileAttachment("Ludo - Meme top.png")], ["Ludo - Sing Aloud 2", FileAttachment("Ludo - Meme bottom.png")] ]; const form = html` `; form.file.onchange = () => { form.select.value = "Other"; form.value = new Promise((resolve, reject) => { const image = new Image(); image.src = URL.createObjectURL(form.file.files[0]); image.onload = () => resolve(image); image.onerror = reject; }); form.dispatchEvent(new CustomEvent("input")); }; form.select.onchange = async () => { if (form.select.value === "Other") { form.file.click(); } else { form.value = files[form.select.selectedIndex][1].image(); form.dispatchEvent(new CustomEvent("input")); } }; form.select.selectedIndex = 7; form.select.onchange(); return form; }33:T441,doubleCanvas = { const image1_width = image.naturalWidth; const image1_height = image.naturalHeight; const image2_width = image2.naturalWidth; const image2_height = image2.naturalHeight; const context = DOM.context2d(memeWidth, memeHeight, 1); context.canvas.style.maxWidth = "100%"; context.drawImage(image, 0, 0); context.drawImage(image2, 0, memeHeight / 2); context.font = `${fontSizeTop}px ${fontFamily}`; context.textAlign = "center"; context.fillStyle = "#fff"; context.lineWidth = 3; context.lineJoin = "round"; context.textBaseline = "top"; context.strokeText(toptext, memeWidth / 2, memeHeight * paddingTop); context.fillText(toptext, memeWidth / 2, memeHeight * paddingTop); context.fillText( toptextLineTwo, memeWidth / 2, memeHeight * paddingTop * 2 + fontSizeTop ); context.textBaseline = "bottom"; context.font = `${fontSize}px ${fontFamily}`; context.strokeText(bottomtext, memeWidth / 2, memeHeight * (1 - padding)); context.fillText(bottomtext, memeWidth / 2, memeHeight * (1 - padding)); return context.canvas; }34:[{"id":"b9f4eb7f29053d0d12900a476f95f6cdf9439c7048493117a8109cb8a5a591d1eb55a9b8885b8fbc016966a66b537c4e74b9ac41d26e5b9ed9eafa373bc16808","href":"https://static.observableusercontent.com/files/b9f4eb7f29053d0d12900a476f95f6cdf9439c7048493117a8109cb8a5a591d1eb55a9b8885b8fbc016966a66b537c4e74b9ac41d26e5b9ed9eafa373bc16808","name":"picard-facepalm.jpg","type":"image/jpeg","lastModified":1605269849633.176,"size":91853},{"id":"3bb24463f8d46fa82f3c575dceea2fe782eba71e4a5625893070c46d0f1f0adc07bbeadbdd65f307b444fa808840512f0c62f80a3ef5da4056b52027d1be0f53","href":"https://static.observableusercontent.com/files/3bb24463f8d46fa82f3c575dceea2fe782eba71e4a5625893070c46d0f1f0adc07bbeadbdd65f307b444fa808840512f0c62f80a3ef5da4056b52027d1be0f53","name":"picard-annoyed.jpg","type":"image/jpeg","lastModified":1605269849633.176,"size":91822},{"id":"02d4686b3f107afa5d119b47408ac2f2a52a93c484e873c6b6408bffb30abe9e8804d0e43a5e50c6b3fb2f38a73cddc7aa0f249e26bd196708ddee0acdae1a3c","href":"https://static.observableusercontent.com/files/02d4686b3f107afa5d119b47408ac2f2a52a93c484e873c6b6408bffb30abe9e8804d0e43a5e50c6b3fb2f38a73cddc7aa0f249e26bd196708ddee0acdae1a3c","name":"is-this-a-pigeon.jpg","type":"image/jpeg","lastModified":1605269849633.176,"size":54721},{"id":"2814df6f046dab031dce6434538afd6892affceac550f607b575664043825407e393b22c9417b8e0619494d3b4714def2ac4d1b385b8811110b77f2f70663b04","href":"https://static.observableusercontent.com/files/2814df6f046dab031dce6434538afd6892affceac550f607b575664043825407e393b22c9417b8e0619494d3b4714def2ac4d1b385b8811110b77f2f70663b04","name":"buy-a-boat-cat.jpg","type":"image/jpeg","lastModified":1605269849633.176,"size":34772},{"id":"49c9daa4baf608af8e9f7f805772814d0f1ded0e109a46c1ae80765a83f5a98bd9591e0c81463ae94bc1c9e929482fc511a3941aff40e494ced41b0bce44c753","href":"https://static.observableusercontent.com/files/49c9daa4baf608af8e9f7f805772814d0f1ded0e109a46c1ae80765a83f5a98bd9591e0c81463ae94bc1c9e929482fc511a3941aff40e494ced41b0bce44c753","name":"bohemian-rhapsody.jpg","type":"image/jpeg","lastModified":1605269849633.176,"size":46848},{"id":"b27f10ef72c75823ca1c0d46cf1c0990d19a478d1e8e05c62db012aa81fc977e648175cc9d96040ac06df012ba6f1ed1b08bb75ec5aebe5e30eb89c9f2ae9b8f","href":"https://static.observableusercontent.com/files/b27f10ef72c75823ca1c0d46cf1c0990d19a478d1e8e05c62db012aa81fc977e648175cc9d96040ac06df012ba6f1ed1b08bb75ec5aebe5e30eb89c9f2ae9b8f","name":"beastie-boys.jpg","type":"image/jpeg","lastModified":1605269849633.176,"size":73554},{"id":"2472a6aafb34ab541534ab10092200692a4d905676732629754dd54bd9e62a40bb4584a0e63c1359114701bfaab9c2080f4ea6aaf9ada48a7aecaa7ceaee7984","href":"https://static.observableusercontent.com/files/2472a6aafb34ab541534ab10092200692a4d905676732629754dd54bd9e62a40bb4584a0e63c1359114701bfaab9c2080f4ea6aaf9ada48a7aecaa7ceaee7984","name":"Ludo - Meme top.png","type":"image/png","lastModified":1605272338375.238,"size":1373656},{"id":"c595812bedcc74c6343f0e1097ac182b4a97d20acb13b2b468fccd9a23de3f5fb5cf00e184d416b47714a027f5788307155144c05334f5947c2c8bf2b8d89de4","href":"https://static.observableusercontent.com/files/c595812bedcc74c6343f0e1097ac182b4a97d20acb13b2b468fccd9a23de3f5fb5cf00e184d416b47714a027f5788307155144c05334f5947c2c8bf2b8d89de4","name":"Ludo - Meme bottom.png","type":"image/png","lastModified":1605272338336.382,"size":1031328}] 2f:{"title":"Meme Generator – Dual Images","cells":[{"id":0,"value":"md`# Meme Generator – Dual Images\n\n_Hacked_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`_Top Image_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`_Bottom Image_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`### Dual Image Meme`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof toptext = textarea({\n value: \"O beta ji..\",\n placeholder: \"Enter top text\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof toptextLineTwo = textarea({\n value: \"Kismat ki hawa kabhi naram.. kabhi garam..\",\n placeholder: \"Enter top text line two (optional)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof bottomtext = textarea({value: \"Gaao bho*dike\", placeholder: \"Enter bottom text\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof fontFamily = {\n const form = html`\n \n \n`;\n form.text.oninput = () => (form.value = form.text.value);\n form.select.onchange = () => {\n if (form.select.value === \"Other\") {\n form.text.style.display = \"inline\";\n form.text.select();\n form.value = form.text.value;\n } else {\n form.text.style.display = \"none\";\n form.value = form.select.value;\n }\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof fontSizeTop = {\n const form = html`\n \n \n

`;\n form.i.oninput = () =>\n (form.o.value = `${(form.value = form.i.valueAsNumber)}px font-size`);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof fontSize = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px font-size`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof paddingTop = {\n const form = html``;\n form.i.oninput = () =>\n (form.o.value = `${((form.value = form.i.valueAsNumber) * 100).toFixed(\n 0\n )}% padding`);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof padding = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${((form.value = form.i.valueAsNumber) * 100).toFixed(0)}% padding`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`### Single Image Meme`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"canvas = {\n const width = image.naturalWidth;\n const height = image.naturalHeight;\n const context = DOM.context2d(width, height, 1);\n context.canvas.style.maxWidth = \"100%\";\n context.drawImage(image, 0, 0);\n context.font = `${fontSize}px ${fontFamily}`;\n context.textAlign = \"center\";\n context.fillStyle = \"#fff\";\n context.lineWidth = 3;\n context.lineJoin = \"round\";\n context.textBaseline = \"top\";\n context.strokeText(toptext, width / 2, height * padding);\n context.fillText(toptext, width / 2, height * padding);\n context.textBaseline = \"bottom\";\n context.strokeText(bottomtext, width / 2, height * (1 - padding));\n context.fillText(bottomtext, width / 2, height * (1 - padding));\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"memeWidth = image.naturalWidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"memeHeight = image.naturalHeight + image2.naturalHeight","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"function textarea({value = \"\", placeholder = \"Enter text here\"}) {\n const textarea = html``;\n textarea.placeholder = placeholder;\n textarea.value = value;\n textarea.style = `\n display: block;\n box-sizing: border-box;\n width: calc(100% + 28px);\n font: var(--mono_fonts);\n border: none;\n padding: 6px 10px;\n margin: 0 -14px;\n background: rgb(247,247,249);\n `;\n return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}