javascript - 如何使用 KonvaJS 访问 JS 中的图像属性

Question

我正在 JS 中上传和加载图像。
因此，当我使用 console.log(anImage) 时，我会得到如下所示的元素。

  draggable: (...)
> elm: text
> image: img
    complete: (...)
    contentEditable: (...)
    crossOrigin: (...)
    currentSrc: (...)
    dataset: (...)
    decoding: (...)
    dir: (...)
    draggable: (...)
    firstChild: (...)
    firstElementChild: (...)
    height: 600
    isRootInsert: false
  name: 'pear'

console.log(anImage.name) // 'pear'

但我的目标是我想获得图像属性的高度。
因此，当我输入“anImage.image”时，它只是给出图像的路径，而不是图像的属性。如何访问图像属性来获取高度？非常感谢您的阅读。

Answer 1

可以使用 Javascript 加载图像并检查尺寸。但请注意，加载图像的过程是异步的，这意味着您的 JS 代码可以在从服务器访问图像并通过网络拉到运行 JS 的客户端之前执行。这意味着您必须等待或“监听”直到加载完成事件在图像对象上触发，然后才能查看其尺寸。

在纯 JavaScript 中，您可以使用一个简单的过程，如下所示:

    var img = new Image();
    img.onload = function() {
      alert(this.width + 'x' + this.height);
    }
    img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

这里的技巧是设置 img.onload 监听器，以便当图像“到达”执行 JS 代码的客户端时，为您执行它声明的函数。

当您在 Konva 中使用图像时，您必须遵循相同的模式。 Konvajs 文档有 simple example of image loading using onload()

对于新手来说，误解使用服务器源资源的异步性质是一个非常常见的问题。