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

我需要构建一个函数，该函数从参数获取文件，调整其大小并返回要上载的文件。Javascript：使用HTML调整大小函数5

我已经有代码来获取文件（使用jQuery文件上传），然后我抓住了文件变量，并通过这个方法命名为resizeImage我从this link了，但我无法弄清楚如何返回我调整大小的文件（我是新的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); 
}

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

来源

2013-11-15 betoharres

使用canvas.toDataURL（）方法将画布的二进制图像数据作为base64字符串虚拟文件。然后您可以使用ajax将绑定数据发送到S3或将其作为映像下载到用户的本地计算机。 – dandavis

您无法单独使用ajax下载图像：您可以将其发送到服务器端控制器，也可以使用flash/java小程序执行此操作。 – silicakes

你不能从客户端做到这一点，因为出于安全原因 - 文件的创建是由浏览器禁止：

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

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

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

破解围绕lmitation;它可以很好地处理文本文件，但IE会遇到问题，因为它会限制href长度，这可能不适合您的文件。

另一种方式是使用闪光灯，像Downloadify这样的IE，并将二进制表示传递给它。

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

来源

2013-11-15 18:09:17 silicakes

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

回答

相关问题