Redimensionamento de imagem no lado do cliente com JavaScript antes de carregar no servidor

Eu estou procurando uma maneira de resize uma imagem do lado do cliente com JavaScript (realmente resize, não apenas alterar a largura e altura).
Eu sei que é possível fazer isso no Flash, mas eu gostaria de evitar isso se possível.

Existe algum algoritmo de código aberto em algum lugar da web?

    Aqui está uma essência que faz isso: https://gist.github.com/dcollien/312bce1270a5f511bf4a

    (uma versão es6 e uma versão .js que podem ser incluídas em uma tag de script)

    Você pode usá-lo da seguinte maneira:

       

    Ele inclui um monte de detecção de suporte e polyfills para garantir que ele funcione em quantos navegadores eu conseguisse.

    (também ignora imagens gif – caso elas sejam animadas)

    A resposta para isso é sim – no HTML 5 você pode resize imagens do lado do cliente usando o elemento canvas. Você também pode pegar os novos dados e enviá-los para um servidor. Veja este tutorial:

    http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

    Se você estava redimensionando antes de fazer o upload, acabei de descobrir este http://www.plupload.com/

    Faz toda a magia para você em qualquer método imaginável.

    Infelizmente apenas o redimensionamento HTML5 é suportado pelo navegador Mozilla, mas você pode redirect outros navegadores para o Flash e o Silverlight.

    Eu apenas tentei e funcionou com o meu android!

    Eu estava usando http://swfupload.org/ em flash, ele faz o trabalho muito bem, mas o tamanho do redimensionamento é muito pequeno. (não consegue lembrar o limite) e não volta para html4 quando o flash não está disponível.

    http://nodeca.github.io/pica/demo/

    No navegador moderno, você pode usar a canvas para carregar / salvar dados de imagem. Mas você deve ter em mente várias coisas se você resize a imagem no cliente:

    1. Você terá apenas 8bits por canal (o jpeg pode ter um melhor alcance dynamic, cerca de 12 bits). Se você não fizer o upload de fotos profissionais, isso não será um problema.
    2. Tenha cuidado com o algoritmo de redimensionamento. A maioria dos resizers do lado do cliente usa matemática trivial, e o resultado é pior do que poderia ser.
    3. Talvez seja necessário aprimorar a imagem com redução de escala.
    4. Se você deseja reutilizar os metadados (exif e outros) do original – não se esqueça de retirar as informações do perfil de colors. Porque é aplicado quando você carrega a imagem na canvas.

    Talvez com a tag de canvas (embora não seja portátil). Há um blog sobre como girar uma imagem com canvas aqui , suponho que, se você conseguir girá-la, poderá redimensioná-la. Talvez possa ser um ponto de partida.

    Veja lá também.

    Sim, com navegadores modernos isso é totalmente factível. Mesmo factível ao ponto de carregar o arquivo especificamente como um arquivo binário tendo feito qualquer número de alterações de canvas.

    http://jsfiddle.net/bo40drmv/

    (esta resposta é uma melhoria da resposta aceita aqui )

    Tendo em mente capturar o processo de submissão de resultados no PHP com algo parecido com:

     //File destination $destination = "/folder/cropped_image.png"; //Get uploaded image file it's temporary name $image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0]; //Move temporary file to final destination move_uploaded_file($image_tmp_name, $destination); 

    Se alguém se preocupa com o ponto de Vitaly, você pode tentar alguns cortes e redimensionamentos no trabalho.

    Você pode usar uma estrutura de image processing javascript para image processing do lado do cliente antes de carregar a imagem no servidor.

    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()); }