ASP.NET VwdCms.ImageZoom 控件 - 调整/缩放图像的 JavaScript

• 下载演示 - 103.47 KB
• 下载源代码 - 3.67 KB

在线试用 VwdCms.ImageZoom 控件： ImageZoom 控件在线演示

引言

级别：初级 JavaScript & DHTML

我实际上构建 VwdCms.ImageZoom 控件只是为了测试我正在开发的另一个项目——创建工具栏，特别是跨页面多个控件共享工具栏。此版本的 ImageZoom 没有内置自己的工具栏——您看到的工具栏只是示例 Web 窗体中的 HTML。

我很快会发布另一篇关于工具栏的文章，其中将包含 VwdCms.ImageZoom 的修改（增强）版本作为实现示例。我决定不在这篇文章中详细讨论 ImageZoom，而是先在这里介绍它。我认为这个控件中的 JavaScript 代码因其简洁而有趣。我希望代码示例和讨论对于任何尝试在客户端操作或调整图像 / img 元素大小的人来说都有所帮助。

使用控件

要将 VwdCms.ImageZoom 控件添加到您的项目中，只需按照以下步骤操作：

步骤 1

将这些文件复制到您的项目目录中

1. /App_Code/ImageZoom.cs
2. images/zoomin.gif
3. images/zoomout.gif
4. images/actualsize.gif
5. images/bestfit.gif

第二步

更新您的 web.config 文件中的 Controls 部分：（在 system.web 部分内）

    <pages>
        <controls>
            <add tagPrefix="VwdCms" namespace="VwdCms"/>
        </controls>
    </pages>

步骤 3

在您的 Web 窗体中添加 VwdCms.ImageZoom 控件

    <VwdCms:ImageZoom runat="server" ID="izImgZoom"
    ImageUrl="images/horizontal.jpg"
    style="width:450px;height:400px;overflow:auto;" />

步骤 4

创建一个类似于示例项目中的工具栏。注意：我很快会发布 VwdCms.ImageZoom 控件的更新版本，该版本将具有内置工具栏并支持“工具栏共享”。

所有 JavaScript 代码都包含在 C# 类中，因此无需包含脚本引用。下面代码示例中出现的元素 ID 是由 C# 类自动生成的，因此您无需担心设置它们或硬编码它们。

我已验证此代码可在 Internet Explorer 7 和 Firefox 2.0 中正常工作。

关键概念

当您想修改将在网页上渲染的图像的尺寸时，使其看起来效果好的关键是只设置一个维度。通过仅设置 width，您可以让浏览器缩放图像并确定 height——结果是更具视觉吸引力的放大或缩小。

使用 JavaScript 放大或缩小图像时也是如此——只需设置一个维度，我更喜欢设置 width 属性。放大缩小的另一个关键点是让图像恢复到其原始大小。您无需进行任何复杂的编码或将原始宽度存储在变量中，只需使用标准的 DOM removeAttribute('width') 方法从图像（img 元素）中删除 width 属性即可。删除 width 属性后，浏览器将以其原始大小渲染图像。

“最佳拟合”代码之所以有趣，是因为事实证明它并不复杂。要对图像进行“最佳拟合”，您需要知道图像的“纵横比”（代码中的 ar），还需要知道要将图像放入其中的框的宽度（代码中的 clientWidth, cw）和高度（代码中的 clientHeight, ch）。

纵横比：ar = img.width / img.height;

纵横比大于 1.0 表示图像的宽度大于其高度。反之，纵横比小于 1.0 表示图像的高度大于其宽度。

利用上述信息，我们需要在两种情况下设置图像的 width。

纵横比 >= 1.0：将图像的 width 设置为要将其放入其中的框的 width ，即 img.width = cw;。

纵横比 < 1.0：使用 width = ch * ar; 计算图像的 width，这只是上面纵横比公式的重新排列，只不过我用“框高” ch 替换了 img.width，方程的净结果是基于我要将图像放入其中的框的高度 ch 进行缩放的 width。

JavaScript代码

这个控件的精妙之处确实在于其极其简单的 JavaScript……

function setImage(src)
{
    try
    {
        var img = document.getElementById('imgMain');

        // make sure image is loaded using its
        // original dimensions the first time
        img.removeAttribute('width');

        // change the URL for the image element
        img.src = src;
    }
    catch(e)
    {
        alert('setImage error: ' + e.message);
    }
}

function zoomIn()
{
    try
    {
        var img = document.getElementById('imgMain');

        // zoom in by 25%
        img.width = img.width * 1.25;
    }
    catch(e)
    {
        alert('zoomIn error: ' + e.message);
    }
}

function zoomOut()
{
    try
    {
        var img = document.getElementById('imgMain');

        // zoom out by 25%
        img.width = img.width * 0.75;
    }
    catch(e)
    {
        alert('zoomOut error: ' + e.message);
    }
}

function actualSize()
{
    try
    {
        var img = document.getElementById('imgMain');

        // return the image back to its
        // original dimensions
        img.removeAttribute('width');
    }
    catch(e)
    {
        alert('actualSize error: ' + e.message);
    }
}

function bestFit()
{
    try
    {
        var iz = document.getElementById('izImgZoom');
        var img = document.getElementById('imgMain');
        var cw = iz.clientWidth;

        // sometimes the clientWidth is 0 in IE,
        // so look at the parent elements until
        // a valid clientWidth is found
        while ( cw == 0 )
        {
            iz = iz.parentElement;
            cw = iz.clientWidth;
        }
        var ch = iz.clientHeight;

        // return the image back to its
        // original dimensions
        img.removeAttribute('width');

        // calculate the aspect ratio
        var ar = img.width / img.height;

        if ( ar >= 1.0 )
        {
            // easy, set the image width to
            // the 'box width' minus 2 pixes for
            // the border of the image
            img.width = cw-2;
        }
        else
        {
            // compute the image width using
            // the 'box height' and 'aspect ratio'
            // minus 2 pixes for the border of the image
            img.width = Math.floor(ch * ar)-2;
        }
    }
    catch(e)
    {
        alert('bestFit error: ' + e.message);
    }
}

历史

• 2007 年 5 月 24 日 - 初始发布