Scala.js で xhr で画像をとってきて表示する

XHRImage.js.scala

package com.github.tototoshi.gifplayer

import scala.scalajs.js
import js.annotation.JSExport
import org.scalajs.dom

@JSExport
object GIFPlayer extends js.JSApp {

  def main(): Unit = {
    val xhr = new dom.XMLHttpRequest
    xhr.open("GET", "/test.gif", true)
    xhr.responseType = "arraybuffer"
    xhr.onload = (e: dom.Event) => {
      /* xhr.response は xhr.responseType で型が変わるので js.Any */
      val arr = new dom.Uint8Array(xhr.response.asInstanceOf[dom.ArrayBuffer])
      
      val byteArray = for (i <- 1 to arr.byteLength.toInt) yield arr(i - 1).toChar
      val contentType = xhr.getResponseHeader("Content-type")
      val src = "data:" + contentType + ";base64," + dom.btoa(byteArray.mkString)
      val gifImage = dom.document.getElementById("gif")
      gifImage.setAttribute("src", src)
    }
    xhr.send()
  }

}