使用Raphael如何保留图像的纵横比

Question

我希望通过增加图像的宽度来保留图像的纵横比。创建图像时我正在做

paper.image(inputUrl, 100,100,500,600);

不是为图像设置高度600，而是希望svg根据原始图像的宽高比来计算它。

我确实看到preserveAspectRatio =“none”，如何根据我的需要使用Raphael.js更改它

<image x="5" y="5" width="800" height="0" preserveAspectRatio="none" xlink:href="http://whiteboard.veeralab.com:8091/public/images/3a/a82/1dc-740e-4137-9ac0-d3d10b68708a.jpg" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>

Answer 1

您可以预加载图像并计算必要的尺寸：

var img = document.createElement('img');
img.onload = function() {

    // At this point, img.width and img.height
    // contain actual dimensions of the image.
    // Calculate scaled dimensions and add image to Raphael.

    delete img;
};
img.setAttribute('src', inputUrl);