Clojurians Log v2

Is there a way to render a jpeg or png of a rectangular element (in the humbleui window, which i was referring to as “canvas” ). Preferably constrained to specified pixel dimensions, and with optional transparency in pngs. Im a fan of your typography (primitives) taste, …and I have ptsd from css! I would like to compose and composite graphics in humblui design space, but export image assets for use in other things (email, html, etc).

(ns humbleui-demo.humbleui-demo
  (:require [io.github.humbleui.ui :as ui])
  (:import
   [io.github.humbleui.skija Paint Shader EncodedImageFormat Image ]
   ))

(def ui
  (let [shader (Shader/makeLinearGradient
                 (float 0)
                 (float 0)
                 (float 0)
                 (float (* 400 2 1))
                 (int-array 
                   [(unchecked-int 0xFF277da1)
                    (unchecked-int 0xFFffba08)]))
        paint  (-> (Paint.) (.setShader shader))]
    
    (ui/default-theme {}
      (ui/column
        [:stretch 0.2 
         (ui/rect paint (ui/gap 0 0))]
        
        ;; where to put this?
        (-> (ui/rect paint (ui/gap 0 0))
          (ui/image-snapshot)
          (.encodeToData EncodedImageFormat/PNG)
          .getBytes)
        ))))

(comment
  ;; example code
  (-> ui/canvas .getSurface .makeImageSnapshot)
  (-> image (.encodeToData EncodedImageFormat/PNG) .getBytes)

  (ui/start-app!
    (ui/window
      {:title "HumbleUI"}
      #'ui))
  )

; Execution error (IllegalArgumentException) at humbleui-demo.humbleui-demo/fn (REPL:29).
; No matching method encodeToData found taking 1 args for class io.github.humbleui.ui.image_snapshot.ImageSnapshot

some reference: • https://github.com/JetBrains/skija/blob/8581a6c04808c0ada7863aabed9f2a9d77353b39/examples/bitmap/src/RenderToBitmap.java#L28 • https://github.com/HumbleUI/Skija/blob/master/docs/Getting%20Started.md#rendering-the-first-image • https://clojurians.slack.com/archives/C033FTUBWH5/p1664212770642909

So one way would be to create in-memory Surface, get Canvas from it, pass that canvas to HumbleUI component’s -draw method, and then convert surface to image. See here: https://github.com/HumbleUI/Skija/blob/master/examples/bitmap/src/RenderToBitmap.java

(even though example is called RenderToBitmap, there are no Skija Bitmap used :)

If you want to “screenshot” part of your active HumbleUI window, then you need Canvas::readPixels I think. Take a look at https://github.com/HumbleUI/Skija/blob/master/examples/scenes/src/BitmapScene.java

The way I’d do it is: create a custom HumbleUI wrapper component, wrap what you want to screenshot, inside -draw call -draw on a child, then proceed with Canvas::readPixels

There’s a rect passed to -draw that represents component’s bounds in absolute coords

Use that to construct bitmap and calculate srcX/srcY

No, it’s because ui/image-snapshot does not do what you think it does. What do you mean “save bitmap from canvas”? What’s canvas?