图像在上传前调整大小

Question

我需要为用户提供一种手段,以jpeg格式将照片上传到他们的网站.但是,照片的原始尺寸非常大,我想在上传前调整大小选项对用户来说非常轻松.似乎我唯一的选择是客户端应用程序,它在通过Web服务上载照片之前调整照片大小,或者在上传操作上调整照片大小的客户端JavaScript挂钩.第二个选项是非常试验性的,因为我没有JavaScript图像大小调整库,并且很难让JavaScript运行我当前的调整大小工具ImageMagick.

我确信这不是一个不常见的场景,并且对这样做的网站的一些建议或指针将不胜感激.

Answer 1

在2011年,我们可以通过File API和canvas来了解它.这仅适用于firefox和chrome.这是一个例子:

var file = YOUR_FILE,
    fileType = file.type,
    reader = new FileReader();

reader.onloadend = function() {
  var image = new Image();
      image.src = reader.result;

  image.onload = function() {
    var maxWidth = 960,
        maxHeight = 960,
        imageWidth = image.width,
        imageHeight = image.height;

    if (imageWidth > imageHeight) {
      if (imageWidth > maxWidth) {
        imageHeight *= maxWidth / imageWidth;
        imageWidth = maxWidth;
      }
    }
    else {
      if (imageHeight > maxHeight) {
        imageWidth *= maxHeight / imageHeight;
        imageHeight = maxHeight;
      }
    }

    var canvas = document.createElement('canvas');
    canvas.width = imageWidth;
    canvas.height = imageHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

    // The resized file ready for upload
    var finalFile = canvas.toDataURL(fileType);
  }
}

reader.readAsDataURL(file);

Answer 2

有多技术功能的Plupload工具声明它可以在上传前调整大小,但我还没有尝试过.我在关于二进制图像处理javascript库的问题中也找到了合适的答案.

Answer 3

你有几个选择:

1. Java的
2. ActiveX(仅限Windows)
3. Silverlight的
4. 闪
5. 柔性
6. Google Gears(最新版本可以调整大小并从桌面拖放)

我已经做了很多研究,寻找与你所描述的类似的解决方案,并且有许多解决方案在质量和灵活性方面有很大差异.

我的建议是找到一个解决方案,它可以满足您的需求,并根据您的需求进行定制.