Closed erasmus closed 8 years ago
erasmus
commented
8 years ago One potential candidate is: https://github.com/tsayen/dom-to-image (for approach 1.). Looks promising. Need to test.
Update: So this has been tested, and does not work. Outputs lo-res image and is difficult to deal with.
See branch for more detail: https://github.com/degeist/book-cover-generator/tree/domtoimage
erasmus
commented
8 years ago Canvas experiment (3.) is being conducted here: https://github.com/degeist/book-cover-generator/tree/canvas-test
Update Okay, the canvas seems to be the way to go. It can be downloaded as a data-uri (data-uri is however limited to 42kb in browsers... Which is why the current demo is using lo-res images). Data-uri can be sent with a POST request (up to 4GB, so no problem) to server.
TODO: Ensure that our canvas version (e.g. transparent PNG and custom font integration) works on all major/latest browsers (also Android/iOS) --> this library may come in handy for that: https://konvajs.github.io/
Update 2
I got the "copy-canvas-to-dataURI" function to work previously but it somehow stopped working again. It does out put an img with an dataURI, but probably too big (the custom type face is 25kb, jpg is 12kb, png is 3kb or so, and perhaps there's some fluff). Perhaps you can try with a POST request on a local server setup @avorio ?
avorio
commented
8 years ago So, just a quick update to note that we've decided to move ahead with Cloudinary's image transformation API. Here are the examples discussed earlier today:
How can we generate an image from the user-edited artboard?
Artboard features:
Update Seems to be a little trickier than expected. I've identified 3 approaches:
DOM + screenshot:Build a DOM element with "traditional" HTML elements and generate a screenshot from this. E.g. a<div>container with some text, CSS background image, PNG img. (Didn't work)