Redimensionamento de imagem antes do upload

Eu preciso fornecer um meio para um usuário fazer upload de fotos para seu site em formato jpeg. No entanto, as fotos são muito grandes em tamanho original, e eu gostaria de fazer o redimensionamento antes da opção de upload muito fácil para o usuário. Parece que minhas únicas opções são um aplicativo do lado do cliente que redimensiona as fotos antes de carregá-las por meio de um serviço da Web ou um gancho JavaScript do lado do cliente na operação de upload que redimensiona as imagens. A segunda opção é muito experimental porque não tenho uma biblioteca de redimensionamento de imagens JavaScript, e será difícil obter o JavaScript para executar minha ferramenta de redimensionamento atual, o ImageMagick.

Tenho certeza de que isso não é um cenário muito incomum, e algumas sugestões ou sugestões para sites que fazem isso serão apreciadas.

Você tem várias opções:

  1. Java
  2. ActiveX (apenas no Windows)
  3. Silverlight
  4. Instantâneo
  5. Flex
  6. Google Gears (a versão mais recente é capaz de resize e arrastar e soltar a partir do seu desktop)

Fiz muita pesquisa procurando uma solução semelhante ao que você descreveu e há muitas soluções por aí que variam muito em qualidade e flexibilidade.

Minha sugestão é encontrar uma solução que faça 80% do que você precisa e personalize-a para atender às suas necessidades.

Em 2011, podemos saber fazer isso com a API File e canvas. Isso funciona por enquanto apenas no firefox e no chrome. Aqui está um exemplo :

var file = YOUR_FILE, fileType = file.type, reader = new FileReader(); reader.onloadend = function() { var image = new Image(); image.src = reader.result; image.onload = function() { var maxWidth = 960, maxHeight = 960, imageWidth = image.width, imageHeight = image.height; if (imageWidth > imageHeight) { if (imageWidth > maxWidth) { imageHeight *= maxWidth / imageWidth; imageWidth = maxWidth; } } else { if (imageHeight > maxHeight) { imageWidth *= maxHeight / imageHeight; imageHeight = maxHeight; } } var canvas = document.createElement('canvas'); canvas.width = imageWidth; canvas.height = imageHeight; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0, imageWidth, imageHeight); // The resized file ready for upload var finalFile = canvas.toDataURL(fileType); } } reader.readAsDataURL(file); 

Existe uma ferramenta Plupload com capacidade para múltiplas tecnologias que declara que pode fazer o redimensionamento antes do upload, mas ainda não o testei. Eu também encontrei uma resposta adequada na minha pergunta sobre manipulação de imagens binárias javascript libs .

Eu acho que você precisa de Java ou ActiveX para isso. Por exemplo, upload de imagem fina

O que jao e russau dizem é verdade. A razão disso é que o JavaScript não tem access ao sistema de arquivos local devido a razões de segurança. Se o JavaScript puder “ver” seus arquivos de imagem, ele poderá ver qualquer arquivo, e isso é perigoso.

Você precisa de um controle em nível de aplicativo para poder fazer isso, e isso significa Flash, Java ou Active-X.

Infelizmente você não poderá resize as imagens em Javascript. É possível no Silverlight 2 tho.

Se você quer comprar algo já feito: o Aurigma Image Uploader é bastante impressionante – US $ 250 para as versões ActiveX e Java. Há algumas demos no site, tenho certeza que o facebook usa o mesmo controle.

Solução pura em JavaScript. Meu código redimensiona JPEG por interpolação bilinear e não perde exif.

https://github.com/hMatoba/JavaScript-MinifyJpegAsync

 function post(data) { var req = new XMLHttpRequest(); req.open("POST", "/jpeg", false); req.setRequestHeader('Content-Type', 'image/jpeg'); req.send(data.buffer); } function handleFileSelect(evt) { var files = evt.target.files; for (var i = 0, f; f = files[i]; i++){ var reader = new FileReader(); reader.onloadend = function(e){ MinifyJpegAsync.minify(e.target.result, 1280, post); }; reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); 

Você pode resize a imagem no lado do cliente antes de carregá-la usando uma estrutura de image processing.

Abaixo, usei o MarvinJ para criar um código executável baseado no exemplo da página a seguir: “Processando imagens no lado do cliente antes de fazer o upload para um servidor”

Basicamente eu uso o método Marvin.scale (…) para resize a imagem. Então, eu carrego a imagem como um blob (usando o método image.toBlob () ). O servidor responde fornecendo um URL da imagem recebida.

 /*********************************************** * GLOBAL VARS **********************************************/ var image = new MarvinImage(); /*********************************************** * FILE CHOOSER AND UPLOAD **********************************************/ $('#fileUpload').change(function (event) { form = new FormData(); form.append('name', event.target.files[0].name); reader = new FileReader(); reader.readAsDataURL(event.target.files[0]); reader.onload = function(){ image.load(reader.result, imageLoaded); }; }); function resizeAndSendToServer(){ $("#divServerResponse").html("uploading..."); $.ajax({ method: 'POST', url: 'https://www.marvinj.org/backoffice/imageUpload.php', data: form, enctype: 'multipart/form-data', contentType: false, processData: false, success: function (resp) { $("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):
"); }, error: function (data) { console.log("error:"+error); console.log(data); }, }); }; /*********************************************** * IMAGE MANIPULATION **********************************************/ function imageLoaded(){ Marvin.scale(image.clone(), image, 120); form.append("blob", image.toBlob()); }