调整大小并上传图像的图像上传小部件

Question

我希望创建一个图片上传小部件，可以将图片缩放到低分辨率（比如640x640）。然后我想要将这些缩小的图片上传到服务器，主要是为了避免大文件上传。

最好的实现方式是什么？我正在使用JQuery和Django。

- Snow Leopard

Answer 1

使用Canvas和HTML5。

很简单，只需使用FileReader（在iOS / iPhone上不起作用，因为它们没有用户级文件）打开从文件输入类型元素返回的文件/文件列表即可：

function fileSelectHandler(e) {
    files = e.target.files;
    var len = files.length;
    for(var filei = 0; filei < len; filei += 1) {
         var aFile = files[filei];
         var fileReader = new FileReader();
         fileReader.onload = (function (theFile) {
             return function(e) {
                 if(e.target.result != null && e.target.result != undefined) {    
                     var imge = new Image();
                     imge.src = e.target.result;
                     imageDataURLs[theFile.name] = imge;
                     imge.onload = (function () {
                         return function(e) {
                            draggables[0] = new Draggable(g3,imge);
                            draggableFlow.launch();
                         };
                     })();
                 }
             };
       })(aFile);
       fileReader.readAsDataURL(aFile);
   } // for next file 
};

然后将图像写入画布元素，并允许用户拖动和裁剪它。当他们满意时，使用CanvasRenderingContext2D.getImageData从画布中抓取数据，并通过XHR将该base64字符串发送到服务器。

- Cris Stringfellow

---

我会尝试一下。对于iPhone/iPad，我想编写一个单独的应用程序。所以这不是什么大问题。感谢您详细的回复 :) - Snow Leopard

Answer 2

浏览器对此的支持将会受到限制，但您可以通过编写Flash和Silverlight shims来缓解这种情况，以实现相同的功能。我也看到了一些关于如何使用html5的示例。

Plupload是一个很好的工具，可用于管理此类问题，并为您提供上述所有shims和上传器的详细信息。

http://www.plupload.com/example_all_runtimes.php

如果您查看示例嵌入代码，其中包含一个调整大小对象作为配置的一部分，您可以定义您在帖子中描述的参数。

- j_mcnally

---

Pulpload似乎非常符合我的需求！感谢您的回复 :) - Snow Leopard