如何使用 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 代码可以执行 'before' 从服务器访问图像并通过网络将其拉到 JS 为运行的客户端。这意味着您必须等待或 'listen' 直到加载完成事件在图像对象上触发，然后才能查看其尺寸。

在简单的 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 代码的客户端上的图像 'arrives' 时为您执行它声明的函数。

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

对于使用服务器源资产的异步性质的误解对于新手来说是一个非常常见的绊脚石。

如何使用 KonvaJS 在 JS 中访问图像属性

How to access to image property in JS using KonvaJS

javascript

konvajs

如何使用 KonvaJS 在 JS 中访问图像 属性

How to access to image property in JS using KonvaJS

javascript

konvajs

如何使用 KonvaJS 在 JS 中访问图像属性