4 ms·

Great idea! I've considered adding an option to download individual gradients as an image, but I haven't thought about that as the primary focus. Certainly the

Great idea! I've considered adding an option to download individual gradients as an image, but I haven't thought about that as the primary focus. Certainly the number of people interested in cool backgrounds is going to be much larger than the current audience of frontend web developers. The cool thing is that the two target audiences aren't mutually exclusive. So long as I continue to build out the images in CSS, I can offer both image and CSS download options.

perk 6y ago
FWIW html2canvas is pretty good for all html-screenshotty things. Might work here as well. https://html2canvas.hertzen.com/ https://html2canvas.hertzen.com/
- perk 6y ago
  Come to think of it, CSS isn't its strongest side. No support for filters I think. Maybe worth checking it out anyway.
  - jordanmarshall 6y ago
    I looked into it before, and I don't think html2canvas would work. IIRC the only way to get the gradients was using the screen capture API [1], which works, but requires users to click an authorization prompt before use. [1] https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt...
    - perk 6y ago
      Hm. I've used image-screenshot [1] in the past together with html2canvas to get CSS filter support in screenshots. Don't know if it would work in your scenario though. [1] https://www.npmjs.com/package/image-screenshot https://www.npmjs.com/package/image-screenshot
- onion2k 6y ago
  Good as html2canvas is, these days you may get more milage creating an SVG, putting the HTML content in it as a ForeignObject, and then using the browser's ability to copy an image to a canvas with the SVG as the source. I use that technique in a very complex diagramming app I work on and it never seems to fail regardless of the HTML content. Getting fonts and external styles to work is fun but that wouldn't apply here.
  - xamde 6y ago
    Off-topic, but please tell us more about the diagramming app.

perk 6y ago

FWIW html2canvas is pretty good for all html-screenshotty things. Might work here as well. https://html2canvas.hertzen.com/ https://html2canvas.hertzen.com/

perk 6y ago
Come to think of it, CSS isn't its strongest side. No support for filters I think. Maybe worth checking it out anyway.
- jordanmarshall 6y ago
  I looked into it before, and I don't think html2canvas would work. IIRC the only way to get the gradients was using the screen capture API [1], which works, but requires users to click an authorization prompt before use. [1] https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt...
  - perk 6y ago
    Hm. I've used image-screenshot [1] in the past together with html2canvas to get CSS filter support in screenshots. Don't know if it would work in your scenario though. [1] https://www.npmjs.com/package/image-screenshot https://www.npmjs.com/package/image-screenshot
onion2k 6y ago
Good as html2canvas is, these days you may get more milage creating an SVG, putting the HTML content in it as a ForeignObject, and then using the browser's ability to copy an image to a canvas with the SVG as the source. I use that technique in a very complex diagramming app I work on and it never seems to fail regardless of the HTML content. Getting fonts and external styles to work is fun but that wouldn't apply here.
- xamde 6y ago
  Off-topic, but please tell us more about the diagramming app.