Javascript:使用 HTML 5 调整大小函数

Javascript: Resize function with HTML 5

本文关键字：函数 调整 使用 HTML Javascript      更新时间：2023-09-26

我需要构建一个函数，从参数中获取文件，调整其大小并返回要上传的文件。

我已经有了获取文件的代码（使用 jQuery 文件上传），然后我获取文件变量并传递给我从此链接获得的名为 resizeImage 的方法，但我无法弄清楚如何返回我调整大小的文件（我是 javascript 的新手）。 所以我可以将其发送到亚马逊 S3。如果有人想看代码，这里是：http://pastebin.com/bgYLSFsR

这是我提出的功能：

function resizeImage(f) {
    var file = f;
    var img = document.createElement("img");
    var reader = new FileReader();  
    reader.onload = function(e) {img.src = e.target.result}
    reader.readAsDataURL(file);
    var MAX_WIDTH = 100;
    var MAX_HEIGHT = 100;
    var width = img.width;
    var height = img.height;
    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, 100, 100);
}

非常欢迎任何建议，谢谢！

您无法从客户端执行此操作，因为出于安全原因 - 浏览器禁止创建文件：

没有办法，除非它是一个文本文件，在这种情况下有一些有限的，

仅限客户端的解决方案，例如： http://jsfiddle.net/VBJ9h/319/使用：

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV</a>

在 lmitation 周围进行黑客攻击;它适用于文本文件，但 IE 会出现一个问题，因为它限制了 href 长度，这可能不适合您的文件。

另一种方法是使用flash，IE之类的Downloadify并将二进制表示传递给它。

第三个选项是将结果传递给服务器端控制器，该控制器将为您创建并返回映像。

相关文章：