svgdom/src/dom/html/HTMLImageElement.js

Straightforward DOM implementation for SVG, HTML and XML

import sizeOf from 'image-size'
import { Event } from '../Event.js'
import { HTMLElement } from './HTMLElement.js'
// import { getFileBufferFromURL } from '../../utils/fileUrlToBuffer.js'
// import path from 'path'

export class HTMLImageElement extends HTMLElement {
  constructor (...args) {
    super(...args)
    this.naturalWidth = 0
    this.naturalHeight = 0
    this.complete = false
  }
}

Object.defineProperties(HTMLImageElement.prototype, {
  src: {
    get () {
      return this.getAttribute('src')
    },
    set (val) {
      this.setAttribute('src', val)
      // const url = path.resolve(this.ownerDocument.defaultView.location, val)
      // getFileBufferFromURL(url, (buffer) => {
      sizeOf(val, (err, size) => {
        if (err) {
          this.dispatchEvent(new Event('error'))
          return
        }
        this.naturalWidth = size.width
        this.naturalHeight = size.height
        this.complete = true
        this.dispatchEvent(new Event('load'))
      })
      // })
    }
  },
  height: {
    get () {
      return this.getAttribute('height') || this.naturalHeight
    },
    set (val) {
      this.setAttribute('height', val)
    }
  },
  width: {
    get () {
      return this.getAttribute('width') || this.naturalWidth
    },
    set (val) {
      this.setAttribute('width', val)
    }
  }
})