上传前调整图像大小
image-processing
javascript
6
0

我需要为用户提供一种以jpeg格式将照片上传到其网站的方法。但是,照片的原始尺寸很大,我想让用户轻松上传前调整大小。看来,我唯一的选择是在通过Web服务上传照片之前调整照片大小的客户端应用程序,或者在调整图像大小的上传操作上使用客户端JavaScript挂钩。第二个选项是临时的,因为我没有JavaScript图像大小调整库,并且很难使JavaScript运行我当前的调整大小工具ImageMagick。

我敢肯定,这种情况并不太常见,有些建议或指向这样做的站点的指针将不胜感激。

参考资料:
Stack Overflow
收藏
评论
共 5 个回答
高赞 时间 活跃

乔和罗梭所说的是真的。原因是由于安全原因,JavaScript无法访问本地文件系统。如果JavaScript可以“看到”您的图像文件,则可以看到任何文件,这很危险。

您需要一个应用程序级控件才能执行此操作,这意味着Flash,Java或Active-X。

收藏
评论

您有几种选择:

  1. 爪哇
  2. ActiveX(仅在Windows上)
  3. 银光
  4. 柔性
  5. Google Gears (最新版本可以调整大小并从您的桌面拖放)

我已经进行了很多研究,寻找与您所描述的解决方案相似的解决方案,并且其中存在许多质量和灵活性差异很大的解决方案。

我的建议是找到可以满足您80%需求的解决方案,并对其进行自定义以满足您的需求。

收藏
评论

在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);
收藏
评论

我认为您需要Java或ActiveX。例如薄图像上传

收藏
评论

有一个支持多种技术的Plupload工具声明可以在上载之前重新调整大小,但是我还没有尝试过。在有关二进制图像处理javascript库的问题中,我也找到了合适的答案。

收藏
评论
新手导航
  • 社区规范
  • 提出问题
  • 进行投票
  • 个人资料
  • 优化问题
  • 回答问题

关于我们

常见问题

内容许可

联系我们

@2020 AskGo
京ICP备20001863号