Question

我想创建一个图像上传小部件，它可以将图像调整大小（缩放）到低分辨率（例如640x640）。我想将这些已调整大小的图像上传到服务器。主要是为了防止大量文件上传。

实施它的最佳方法是什么？我正在使用JQuery和Django。

Answer 1

浏览器对此的支持将受到限制，尽管您可以通过编写执行相同操作的Flash和Silverlight填充程序来缓解此问题。我已经看到了一些如何做到这一点的html5示例。

Plupload是一个很好的管理工具，并为您提供上面详述的所有垫片和上传器。

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

如果您查看示例嵌入代码，则会有一个resize对象作为配置的一部分，您可以在其中定义帖子中描述的参数

Answer 2

使用Canvas和HTML5。

这很简单，只需使用FileReader（因为它们没有用户级别的文件就无法在iOS / iPhone上运行）在文件/文件列表中打开，从输入类型文件元素返回：< / p>

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从画布中获取数据，并将该base64字符串发送到XHR中的服务器。

图像上传小部件，用于调整图像大小然后上载它

2 个答案: