javascript - 如何在 javascript 中调整图像大小

Question

我有一个 HTML 编辑器，可以使用 javascript 从预定义按钮插入项目，并且希望添加一个按钮，以便能够发布下载图像的缩略图以及查看完整尺寸的链接。我创建了以下代码，但它不起作用并且总是插入 100X100 大小的图像。谁能建议一种更好的有效方法？

    // insert HTML code
insertHtml: function (url, title) {
    var imgHeight;
    var imgWidth;
    function setHTMLImageSize() {
        imgHeight = this.height;
        imgWidth = this.width;
        var ImageRatio = (imgHeight / imgWidth);
        if (imgWidth > 100) {
            imgWidth = 100;
            imgHeight = (imgWidth * ImageRatio);
        }
        return true;
    }
    var myImage = new Image();
    myImage.name = url;
    myImage.onload = setHTMLImageSize;
    myImage.src = url;
    if (imgWidth = 0) {
        imgWidth = 100;
    }
    if (imgHeight = 0) {
        imgHeight = 100;
    }
    this.get_designPanel().insertHTML("<a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none" + "\" ><img src=\"" + url + "\" title=\"" + title + "\" width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" /></a><br/>click image to View full size<br/>");
}

Answer 1

在 onload 函数触发之前，您将宽度和高度设置为 100。加载将异步发生，因此您应该检查回调内的高度或宽度是否为零。

编辑:- 正如 enhzflep 在下面的评论中所观察到的，您还使用 equal 作为赋值而不是检查条件。当您知道所需的类型时，我通常会将它们更改为三重等于 === 。

通过 CSS 控制缩略图不是更简单吗？您可以设置 max-height 和 max-width 属性来保持宽高比。