[{"data":1,"prerenderedAt":459},["ShallowReactive",2],{"project-20982161":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":44,"post_text":45,"what":46,"said":101,"maker_in_thread":223,"shape":232,"grid":237,"attempts":422,"same_week":423,"maker_shows":33,"maker_hidden":451,"reader_version":452,"card":453},"20982161","Doka image editor","An online image editor using WebGL and CSS transforms","title","Show HN: I built an online image editor using WebGL and CSS transforms","https:\u002F\u002Fpqina.nl\u002Fdoka\u002Fimage-editor\u002F","pqina.nl","rikschennink",1568623379,2019,425,72,44,2195,3,"legend","creative","online image editor","web_app",[21,24,25,26],"webgl","image cropping","browser photo editing","mixed",0.312,{"positive":30,"neutral":31,"mixed":32,"critical":33},15,13,1,5,34,{"performance":36,"idea":39,"design":41,"execution":42,"pricing":43},{"positive":37,"critical":38},4,2,{"positive":38,"critical":40},0,{"positive":38,"critical":38},{"positive":38,"critical":40},{"positive":38,"critical":32},[40,40,40,40,40,40,33,18,18,18,40,40,18,40,33,40,18,32,18,32,18,32,33,33,33,18,33,33,18,18,40,18,32,33,33,33,33,32,33,33],null,{"problem":47,"audience":58,"pricing":66,"motivation":74,"time_to_build":45,"stack":78,"openness":98,"stage":99,"team_size":100},{"value":48,"source":49,"evidence":50},"Quick image editing in the browser without a server-side image processing step","inferred",[51,55],{"id":52,"by":53,"text":54},"20982627","tomashubelbauer","Well done, the app is really smooth even on mobile and I can definitely see it being used for the most common types of image processing. I like the premise of using WebGL and CSS…",{"id":56,"by":11,"text":57},"20982782","Thanks! And indeed, it's a full feature instance of Doka, I figured it might be useful for some people to do quick image editing and offering it for free feels good. It isn't…",{"value":59,"source":49,"evidence":60},"People doing quick image edits, such as memes or simple changes",[61,65],{"id":62,"by":63,"text":64},"20988653","deft","Really nice and simple, loads quickly unlike competitors and seems more useful for making memes \u002F simple image changes. Please add splicing images together, and freeform drawing.",{"id":52,"by":53,"text":54},{"value":67,"source":68,"evidence":69},"Online editor is free; Doka component library is paid","maker",[70,71],{"id":56,"by":11,"text":57},{"id":72,"by":11,"text":73},"20983401","Nope, not for the online image editor, you can edit as many images as you like.",{"value":75,"source":68,"evidence":76},"Offering a full-featured Doka instance free for quick image editing; income from Doka funds other open source work",[77],{"id":56,"by":11,"text":57},[79,88,94],{"value":80,"source":68,"evidence":81},"WebGL",[82,85],{"id":83,"by":11,"text":84},"20982801","Initially I rendered the image preview with CSS 3D transforms, while super fast on Safari, it turned out this wasn't as performant on Chrome when viewing on a retina display…",{"id":86,"by":11,"text":87},"20983138","You're absolutely right, you either go for CSS 3D Transforms, or WebGL, WebGL being faster still.",{"value":89,"source":68,"evidence":90},"2D canvas",[91],{"id":92,"by":11,"text":93},"20992430","Every operation is just way faster in WebGL. I currently use WebGL for display preview and 2D canvas for generating the actual image. I suspect you'll run into performance issues…",{"value":95,"source":68,"evidence":96},"CSS transforms",[97],{"id":83,"by":11,"text":84},"free","launched","solo",{"praise":102,"objections":128,"requests":161,"questions":185,"alternatives":197},[103,113],{"value":104,"source":105,"evidence":106},"Smooth and fast, including on mobile","commenter",[107,108,112],{"id":52,"by":53,"text":54},{"id":109,"by":110,"text":111},"20982691","janaagaard","You forgot to add that it works well on a phone! Amazing work.",{"id":62,"by":63,"text":64},{"value":114,"source":105,"evidence":115},"Clean, intuitive UI design",[116,120,124],{"id":117,"by":118,"text":119},"20988225","brailsafe","Absolutely wonderful UI design. Though I'm not sure if there's any contrast controls etc...",{"id":121,"by":122,"text":123},"20982636","ybahubali2018","Looks great. Excellent work.",{"id":125,"by":126,"text":127},"20983151","danvesma","This is lush – great work",[129,140,150],{"value":130,"source":105,"evidence":131},"Does not work in Firefox for some users (stuck loading, WebGL issues)",[132,136],{"id":133,"by":134,"text":135},"20983423","mk89","It doesn't work in Firefox 69.0 :\u002F Am I the only one? I select one of the images provided in the webpage and it gets stuck on \"Loading image...\". Sigh...",{"id":137,"by":138,"text":139},"20985109","djsumdog","Gets stuck for me too on 68.0.2 (64-bit\u002FLinux). Works in Chrome. Looking at the console I get: \u003CSetDimensions>: Failed to create WebGL context: WebGL creation failed: * Refused…",{"value":141,"source":105,"evidence":142},"Large images are scaled down for preview",[143,147],{"id":144,"by":145,"text":146},"20983076","daliusd","As I'm doing something very similar (but different) for my new product so I definitely checked it out. What I like: * Image orientation (from EXIF) support * I like how intuitive…",{"id":148,"by":11,"text":149},"20983128","Hi, Thanks for feedback! In my experience loading huge images like those and animating them is way too slow so the preview is limited to 1500x1500 pixels (I'm testing on a…",{"value":151,"source":105,"evidence":152},"Free aspect ratio option is confusing",[153,157],{"id":154,"by":155,"text":156},"20982866","sokoloff","Very nice. Suggestion: in the aspect ratio constraint picker, change “free” to “unconstrained”, “variable”, or “fully variable” to avoid the confusion with “no charge”.",{"id":158,"by":159,"text":160},"20982947","mgoetzke","and free is not actually free. i had a very wide image which i chose 16:9 for then back to free and I could not actually move the box back to the original content",[162,174,181],{"value":163,"source":105,"evidence":164},"Combine or splice images and add canvas margins",[165,169,173],{"id":166,"by":167,"text":168},"20984309","lucasverra","i've been looking for an online web tool that allows me to : - paste image 1 from clipboard on canvas - paste image 2 from clipboard on canvas - play with canvas overall size to…",{"id":170,"by":171,"text":172},"20984783","pgt","This is cool. Please consider adding a way to increase the size of the artboard and compose images on it. Put differently, let me \"uncrop\" the image or add margins. Multiple…",{"id":62,"by":63,"text":64},{"value":175,"source":105,"evidence":176},"Offline PWA support",[177],{"id":178,"by":179,"text":180},"20988894","mfbx9da4","Would be cool to make as a PWA so I could use it offline",{"value":182,"source":105,"evidence":183},"Freeform drawing",[184],{"id":62,"by":63,"text":64},[186,193],{"value":187,"source":105,"evidence":188},"Why WebGL instead of SVG",[189],{"id":190,"by":191,"text":192},"20982622","Gehinnn","Nice ;) How come you use WebGL rather than e.g. SVG?",{"value":194,"source":105,"evidence":195},"Is it open source",[196],{"id":52,"by":53,"text":54},[198,205,212,219],{"value":199,"source":105,"evidence":200},"Photopea",[201],{"id":202,"by":203,"text":204},"20983264","tobiaswk","Cool! Can't help but to mention photopea; https:\u002F\u002Fwww.photopea.com\u002F Pretty impressive stuff made by one guy (it was initially). Basically a viable alternative to photoshop in a…",{"value":206,"source":105,"evidence":207},"Picozu",[208],{"id":209,"by":210,"text":211},"20983982","denisovan","And Picozu - https:\u002F\u002Fwww.picozu.com",{"value":213,"source":105,"evidence":214},"GIMP",[215],{"id":216,"by":217,"text":218},"20985211","citilife","I mean, I use gimp...",{"value":220,"source":105,"evidence":221},"Screenzy",[222],{"id":166,"by":167,"text":168},{"comments":224,"answered":225,"key":226},18,7,[227,228,229],{"id":56,"text":57},{"id":148,"text":149},{"id":230,"text":231},"20986383","There is a limit on canvas size in most browsers, unfortunately it's rather low on iOS, more than 12 megapixels (4000x3000) will result in empty canvas elements. Indeed…",{"commenters":233,"max_depth":234,"maker_replies":224,"first_comment_mins":235,"lifespan_hours":236},48,6,96,22,[238,240,241,244,247,250,253,255,257,259,262,266,268,270,272,274,278,279,282,285,288,290,293,295,298,300,302,306,307,310,314,316,318,320,323,324,326,329,331,333,335,337,339,344,346,348,350,354,356,361,362,364,367,368,371,372,375,376,380,383,384,387,389,391,395,397,400,405,407,411,414,418],[202,40,40,239,203,40],"other\u002Fneutral\u002Fnone",[209,40,40,239,210,40],[242,40,40,239,243,40],"20984289","nickjj",[245,40,40,239,246,40],"20985352","IvanK_net",[248,40,40,239,249,40],"20985489","skykooler",[251,40,40,239,252,40],"20985664","kaibee",[254,40,40,239,243,40],"20985713",[256,40,40,239,246,40],"20986132",[258,40,40,239,243,40],"20986254",[260,40,40,239,261,40],"20987711","throw03172019",[263,40,40,264,265,40],"20988400","other\u002Fpositive\u002Fnone","thrax",[52,32,33,267,53,40],"project\u002Fpositive\u002Fperformance",[56,32,40,269,11,32],"maker\u002Fneutral\u002Fnone",[144,38,18,271,145,40],"project\u002Fmixed\u002Fperformance",[148,38,40,273,11,32],"maker\u002Fneutral\u002Fperformance",[275,38,18,276,277,40],"20985075","project\u002Fneutral\u002Fperformance","zawerf",[230,38,40,276,11,32],[280,38,18,276,281,40],"20983391","eternalny1",[283,38,40,284,145,40],"20984041","commenter\u002Fneutral\u002Fnone",[286,18,40,239,287,40],"20987443","bitL",[289,18,40,239,277,40],"20990872",[291,18,40,239,292,40],"20992336","monssoen",[166,37,18,294,167,40],"project\u002Fneutral\u002Fidea",[296,37,40,239,297,40],"20984385","zamadatix",[299,37,40,239,167,40],"20984678",[301,37,18,294,63,40],"20988665",[303,33,33,304,305,40],"20985185","project\u002Fpositive\u002Fnone","MarcScott",[216,33,40,284,217,40],[308,33,40,284,309,40],"20985321","sachdevap",[311,234,18,312,313,40],"20982924","project\u002Fneutral\u002Fnone","leokennis",[315,234,40,269,11,32],"20983002",[133,225,32,317,134,40],"project\u002Fcritical\u002Fperformance",[319,225,40,269,11,32],"20983442",[321,225,18,276,322,40],"20983721","OJFord",[137,225,32,317,138,40],[325,225,40,269,11,32],"20986399",[154,327,18,328,155,40],8,"project\u002Fneutral\u002Fdesign",[330,327,40,269,11,32],"20982892",[158,327,32,332,159,40],"project\u002Fcritical\u002Fdesign",[334,327,40,328,11,32],"20983007",[109,336,33,267,110,40],9,[338,336,40,269,11,32],"20982790",[340,341,33,342,343,40],"20982909",10,"project\u002Fpositive\u002Fidea","BilalBudhani",[345,341,40,269,11,32],"20983047",[62,347,33,267,63,40],11,[170,349,18,294,171,40],12,[351,31,33,352,353,40],"20985477","maker\u002Fpositive\u002Fnone","gvinter",[355,31,40,269,11,32],"20992435",[357,358,33,359,360,40],"20984212",14,"project\u002Fpositive\u002Fdesign","zergione",[178,30,18,294,179,40],[190,363,18,276,191,40],16,[365,363,18,276,366,40],"20982665","w56rjrtyu6ru",[86,363,40,273,11,32],[369,363,18,273,370,40],"20986008","aloer",[92,363,40,273,11,32],[373,363,18,276,374,40],"20982772","onion2k",[83,363,40,273,11,32],[377,378,32,332,379,40],"20982931",17,"fareesh",[381,378,40,382,11,32],"20982997","maker\u002Fneutral\u002Fdesign",[117,224,33,359,118,40],[121,385,33,386,122,40],19,"project\u002Fpositive\u002Fexecution",[388,385,40,352,11,32],"20982805",[125,390,33,386,126,40],20,[392,393,33,352,394,40],"20982625",21,"sharma_pradeep",[396,393,40,352,11,32],"20982804",[398,236,33,267,399,40],"20989269","gwarn",[401,402,32,403,404,40],"20983192",23,"project\u002Fcritical\u002Fpricing","HyperTalk2",[72,402,40,406,11,32],"project\u002Fneutral\u002Fpricing",[408,402,33,409,410,40],"20983962","project\u002Fpositive\u002Fpricing","tomhoward",[412,402,33,409,413,40],"20984011","ceejayoz",[415,402,40,416,417,40],"20984690","commenter\u002Fneutral\u002Fpricing","jermaustin1",[419,420,33,342,421,40],"20983648",24,"zerm778",[],[424,429,433,438,443,447],{"id":425,"name":426,"points":427,"category":428},"21005790","nocsok",343,"web_saas",{"id":430,"name":431,"points":432,"category":428},"20971392","RemoteMore",334,{"id":434,"name":435,"points":436,"category":437},"20985429","Darklang",326,"dev_tools",{"id":439,"name":440,"points":441,"category":442},"20995056","ByteVitae",265,"productivity",{"id":444,"name":445,"points":446,"category":428},"21004039","Publisheet",188,{"id":448,"name":449,"points":450,"category":437},"20950865","Bic",181,false,"v2",{"id":454,"name":5,"line":6,"ai":451,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":455,"top":18,"kw":456,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":457,"url":9,"mix":458,"praise":104,"objection":130,"sub":21},20982161,0.31,[21,24,25,26],"0000005333003050313131555355330315555155",[30,31,32,33],1794036580961]