#Rendering SVG onto a canvas as PNG.

4 messages · Page 1 of 1 (latest)

frail thistle
#

here is my rust code:

pub async fn render(&self, canvas_id: &str) -> Result<(), JsValue> {
        let viewbox = self.svg_viewbox().await?;

        let window = web_sys::window().ok_or_else(|| "Window object not found!")?;

        let document = window
            .document()
            .ok_or_else(|| "Document object not found!")?;

        let canvas = document
            .get_element_by_id(canvas_id)
            .ok_or_else(|| "Canvas object not found!")?
            .dyn_into::<web_sys::HtmlCanvasElement>()
            .map_err(|err| err.to_string())?;

        let context = canvas
            .get_context("2d")
            .map_err(|err| err)?
            .ok_or_else(|| "Context object not found!")?
            .dyn_into::<web_sys::CanvasRenderingContext2d>()
            .map_err(|err| err.to_string())?;

        let img = HtmlImageElement::new()?;

        let blob = Blob::new_with_options(self.decrypted_svg.as_str(), Some("image/svg+xml"));
        let object_url = ObjectUrl::from(blob);
        img.set_src(&object_url);

        context.draw_image_with_html_image_element(&img, viewbox[0] * 2.0, viewbox[1] * 2.0)?;

        Ok(())
    }
#

and how i use it:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script type="module">
    import init, {
      init_panic_hook,
      Renderer,
    } from "./pkg/my_package.js";

    async function runWasm() {
      await init(); // Initialize the wasm module
      init_panic_hook();
    }

    document.addEventListener("DOMContentLoaded", async function (event) {
      await runWasm();
      console.log("Document loaded.");

      const serverUrl =
        "sample_svg/my_svg.encrypted";

      try {
        const renderer = new Renderer();

        const response = await fetch(serverUrl);
        const data = await response.arrayBuffer();
        const svg_string = await renderer.decrypt(new Uint8Array(data));

        const viewbox = await renderer.get_svg_viewbox();
        const canvas = document.getElementById("canvas");
        canvas.width = viewbox[0] * 2;
        canvas.height = viewbox[1] * 2;

        await renderer.render("canvas");
 
      } catch (error) {
        console.error("Error: ", error);
        return;
      }
    });
  </script>
</body>

</html>
#

and my canvas png data is a blank png, nothing is rendered on it

#

for blob and object_url i use the gloo-file crate