image - 使用 scala.js 在 Canvas 上加载和显示图像

Question

我刚开始弄乱 scala.js，很早就卡住了。我没有 Scala 经验，所以我可能忽略了一些简单的事情。我尝试在 Canvas 上显示图像。我试过:

var image:HTMLImageElement = new HTMLImageElement()
image.src = "pathToSource"
image.onload = { () =>
  ctx.drawImage(image, 0, 0, 200, 200) //ctx is the canvas rendering context
}

此代码的问题是 onload 似乎不存在，即使我可以在这里找到它:https://github.com/scala-js/scala-js-dom/blob/master/src/main/scala/org/scalajs/dom/raw/Html.scala#L1333

我还尝试了一些其他方法，例如 onloaddata，但我无法弄清楚编译器需要我做什么:

var image:dom.raw.HTMLImageElement = new HTMLImageElement()
image.src = "/img/image.png"
image.onloadeddata = new js.Function1[Event, _]{
  def apply(v1: Event):Unit={
    ctx.drawImage(image,0,0,200,200)
  }
}

有人知道如何使用 scala js 加载和显示图像吗？

提前致谢!

Answer 1

您必须使用 dom.document.createElement("img") 创建图像 然后在创建的图像上使用 onload 事件，这是一个工作示例:

val ctx = canvas.getContext("2d")
  .asInstanceOf[dom.CanvasRenderingContext2D]
var image = dom.document.createElement("img").asInstanceOf[HTMLImageElement]
image.src = "/img/image.gif"
image.onload = (e: dom.Event) => {
  ctx.drawImage(image, 0, 0, 525, 600, 0, 0, 525, 600)
}