图像上传小部件，调整图像大小然后上传

Question

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

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

Answer 1

虽然您可以通过编写执行相同操作的Flash和Silverlight垫片来缓解此问题，但浏览器对此的支持将受到限制。我已经看到了一些关于如何做到这一点的html5示例。

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

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

，如果你看一下例子嵌入代码有一个大小调整对象中，你可以定义在您的文章

Answer 2

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