Add "Image" to Graphics.Canvas

[jutaro]

Guess this belongs to Graphics.Canvas:
foreign import data Image :: *

[hdgarrood]

We have CanvasImageSource and tryLoadImage already, although arguably we should have a cast from HTMLImageElement to CanvasImageSource too; would that cover what you had in mind?

We'd have to add a dependency on purescript-dom to be able to reference HTMLImageElement, though.

[chriskiehl]

Howdy!

Realizing that this is a pretty old issue at this point, but I ran across it due to running into some limitations with the current tryLoadImage API, and thought I'd dump them here in case it's useful for deciding on that purescript-dom dependency in the future.

I've basically run into two main pain points. (1) a lack of control when calling tryLoadResource and (2) the lack of transparency in using the opaque CanvasImageSource data type.

The first is about browser security. Without any ability to customize the Image that's being created behind the scenes, you'll get hit with a Security Error if you try to load anything from a different origin (for instance, S3). To get around that, you've got to be able to specify the crossOrigin policy on the Image object prior to loading. Currently, that requires punching down into the js to make the modification.

export function tryLoadImageImpl(src) {
  return function(e) {
    return function(f) {
      return function () {
        var img = new Image();
        img.src = src;
        img.crossOrigin = "anonymous"    // <--- This part
        img.addEventListener("load", function() {
          f(img)();
        }, false);
        img.addEventListener("error", function() {
          e();
        }, false);
      };
    };
  };
}

If you want to avoid a full dependency on purescript-dom, what do you think about providing a subset of the Image props as an alternative API? Something like.

type ImageProps = {src :: String, crossOrgin :: Maybe String} -- and so on 
tryLoadImageFull :: ImageProps -> (Maybe CanvasImageSource → Effect Unit) → Effect Unit

The second issue I've run into is with CanvasImageSource being a bit too opaque. One thing that's useful, especially when you want to do further image processing, is to get the dimensions of the image. Currently, this requires using things like unsafeCoerce in order to "see" the attributes that actually exist behind the scenes. This is another area where exposing just a bit more might pay back in terms of what you can do with the APIs, but without needing to pick up another dependency.

Anywho, there's my $0.02.