Added example of using Image apis and event loading

Author: TheSpyder

examples/image_examples.res

@@ -0,0 +1,42 @@
+// question from the forum https://forum.rescript-lang.org/t/how-to-get-img-dimmensions-using-rescript/3556?u=spyder
+let url = ""
+
+open Webapi.Dom
+
+let processImage = url => {
+  Promise.make((resolve, reject) => {
+    // showing the process, this can be done more easily (see below)
+    let e = document->Document.createElement("img")
+    let maybeImg = HtmlImageElement.ofElement(e)
+    let img = Belt.Option.getUnsafe(maybeImg)
+
+    img->HtmlImageElement.setSrc(url)
+    img->HtmlImageElement.addLoadEventListener(event => resolve(. event))
+    img->HtmlImageElement.addErrorEventListener(error => reject(. error))
+
+    let body =
+      document
+      ->Document.asHtmlDocument
+      ->Belt.Option.flatMap(HtmlDocument.body)
+      ->Belt.Option.getUnsafe
+
+    body->Element.appendChild(~child=img->HtmlImageElement.asNode)
+    body->Element.removeChild(~child=img->HtmlImageElement.asNode)->ignore
+  })
+}
+
+let test =
+url
+->processImage
+->Promise.thenResolve(event => {
+  // similar to the above chain, but done all at once without interim variables
+  let img =
+    event
+    ->Event.currentTarget
+    ->EventTarget.unsafeAsElement
+    ->HtmlImageElement.ofElement
+    ->Belt.Option.getUnsafe
+  let width = img->HtmlImageElement.naturalWidth
+  let height = img->HtmlImageElement.naturalHeight
+  Js.log4("width", width, "height", height)
+})

lib/js/examples/image_examples.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var Curry = require("rescript/lib/js/curry.js");
+var Belt_Option = require("rescript/lib/js/belt_Option.js");
+var Caml_option = require("rescript/lib/js/caml_option.js");
+var Webapi__Dom__Document = require("../src/Webapi/Dom/Webapi__Dom__Document.js");
+var Webapi__Dom__HtmlImageElement = require("../src/Webapi/Dom/Webapi__Dom__HtmlImageElement.js");
+
+var url = "";
+
+function processImage(url) {
+  return new Promise((function (resolve, reject) {
+                var e = document.createElement("img");
+                var maybeImg = Curry._1(Webapi__Dom__HtmlImageElement.ofElement, e);
+                maybeImg.src = url;
+                maybeImg.addEventListener("load", (function ($$event) {
+                        return resolve($$event);
+                      }));
+                maybeImg.addEventListener("error", (function (error) {
+                        return reject(error);
+                      }));
+                var body = Belt_Option.flatMap(Webapi__Dom__Document.asHtmlDocument(document), (function (prim) {
+                        return Caml_option.nullable_to_opt(prim.body);
+                      }));
+                body.appendChild(maybeImg);
+                body.removeChild(maybeImg);
+                
+              }));
+}
+
+var test = processImage(url).then(function ($$event) {
+      var img = Curry._1(Webapi__Dom__HtmlImageElement.ofElement, $$event.currentTarget);
+      var width = img.naturalWidth;
+      var height = img.naturalHeight;
+      console.log("width", width, "height", height);
+      
+    });
+
+exports.url = url;
+exports.processImage = processImage;
+exports.test = test;
+/* test Not a pure module */