调整/缩小照片以进行 Web 开发

• 下载演示和源代码 - 51.17 KB

引言

如果我们想调整/缩小照片以进行 Web 开发，从而减少下载时间该怎么办？ 令人惊讶的是，像 Picasa 和 Windows 照片库这样的工具缺乏此功能。 与 Aaron Sherman 的 Quick Snip、shrinkpictures.com 和 resize.it 不同，我们的应用程序需要交互式地调整图像大小。 在调整大小时，我们想看到结果有多大，以及调整大小后的照片的宽度和高度是多少。 我们也想使用 Silverlight，不是吗？ 那么我们开始吧。

（您需要 Microsoft® Silverlight™ Tools for Visual Studio 2008 SP1 (RC1) 才能运行演示解决方案。）

障碍

我们的应用程序 ImageShrinker 允许我们选择一个 *.jpg 或 *.png 文件，以原始大小查看它，使用滑块调整它的大小，并将结果图像保存到文件（以相同格式）。 听起来很简单，对吧？

但当然，总有一些常见的... 障碍

• 所选文件的路径不可用。
  在 OpenFileDialog 中选择的文件确实有一个名称，但没有路径。 唉。 存在一些奇怪的限制。
• 原始图像大小未知。
  我可以看见显示的图像的实际大小，但看不到原始大小。 System.Drawing 命名空间及其 Image 类无法帮助我们计算它。 真糟糕！
• 结果图像无法保存在客户端。
  可以理解的是，我们不希望 Silverlight 写入硬盘，但难道不能有一个控件要求用户确认吗？

幸运的是，总是有服务器来救援！ 我们可以有一个服务器上的 HttpHandler，使用 System.Drawing.Image 为我们计算图像大小。 我们通过非常有用的 WebClient 类访问此 HttpHandler。

//Using System.Net.WebClient
using (FileStream stream = openFileDialog.File.OpenRead())
{
    byte[] buffer = new byte[currentFile.Length];
    stream.Read(buffer, 0, (int)currentFile.Length);
    string imageData = Convert.ToBase64String(buffer);
    WebClient wc = new WebClient();
    wc.UploadStringCompleted += 
	new UploadStringCompletedEventHandler(wc_UploadStringCompleted);
    wc.UploadStringAsync(new Uri("getsize.ashx", UriKind.Relative), imageData);
}

void wc_UploadStringCompleted(object sender, UploadStringCompletedEventArgs e)
{
    string size = e.Result;
    //...
}

保存结果图像有点麻烦。 WebClient 在这里帮不上忙。 它可以帮助我们将原始图像发送到服务器并取回一个缩小的版本，但接下来呢？ 我们仍然无法保存它。 让我们再添加一个技巧，提交一个 ASP.NET 页面，其中包含一个隐藏字段，其中包含图像数据。 然后，该页面将在其响应中返回结果图像，导致浏览器提示我们想要在哪里保存图像。 为了使用户看不到回发，我们将带有隐藏字段的 ASP.NET 页面放在一个隐藏的 iframe 中。

//Calling JavaScript
object[] paramArray = new object[3];
paramArray[0] = imageData;
paramArray[1] = slider.Value / 1000;
paramArray[2] = tbxFileName.Text;
System.Windows.Browser.HtmlPage.Window.Invoke("echo", paramArray); 

JavaScript 函数 echo

function echo(imgData, factor, fileName) {
    var ifr = document.getElementById('ifrSubmit');
    ifr.contentWindow.document.getElementById('hdnImgData').value = imgData;
    ifr.contentWindow.document.getElementById('hdnFactor').value = factor;
    ifr.contentWindow.document.getElementById('hdnFileName').value = fileName;
    ifr.contentWindow.document.getElementById('btnSubmit').click();
}

哇！ 我们做到了！ 在 Silverlight 中这样做值得吗？ 在 Winforms 中肯定更容易（演示项目包含解决方案）。 但是，嘿，克服障碍不是更有趣吗？

浏览器特定

该应用程序在 Internet Explorer（7 和 8 Beta）和 Safari 中运行良好。 在 在 Firefox 中使用浏览器窗口高度的 100% 获得一些帮助后，Firefox 也能正常工作。

在 Chrome 中，图像不会自动更新； 它需要调整窗口大小或滚动。:( 为了使调整大小工作，ImageShrinker 在 JavaScript 中滚动一点。 这很笨拙。 加载新图像时，不会显示（但将鼠标移动到滑块上有帮助）。

历史

• 2008 年 10 月 23 日：初始版本