javascript - manejo - Cambiar el tamaño de la imagen antes de cargar

title css

Question

Necesito proporcionar un medio para que un usuario cargue fotos en su sitio web en formato jpeg. Sin embargo, las fotos son muy grandes en tamaño original, y me gustaría que la opción de redimensionar antes de cargar sea muy fácil para el usuario. Parece que mis únicas opciones son una aplicación del lado del cliente que cambia el tamaño de las fotos antes de subirlas a través de un servicio web, o un enlace de JavaScript del lado del cliente en la operación de carga que redimensiona las imágenes. La segunda opción es muy tentativa porque no tengo una biblioteca de cambio de tamaño de imagen JavaScript, y será difícil obtener el JavaScript para ejecutar mi herramienta de cambio de tamaño actual, ImageMagick.

Estoy seguro de que este no es un escenario poco común, y se agradecerán algunas sugerencias o sugerencias para los sitios que hacen esto.

Answer 1

Creo que necesitas Java o ActiveX para eso. Por ejemplo, Thin Image Upload

Answer 2

En 2011, podemos saber hacerlo con File API y canvas. Esto funciona por ahora solo en Firefox y Chrome. Aquí hay un ejemplo :

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

Answer 3

Hay una herramienta Plupload con capacidad de múltiples tecnologías que declara que puede hacer cambios de tamaño antes de la carga, pero aún no lo he probado. También encontré una respuesta adecuada en mi pregunta sobre el manejo de imágenes binarias javascript libs .

Answer 4

Lamentablemente, no podrá cambiar el tamaño de las imágenes en Javascript. Es posible en Silverlight 2 tho.

Si desea comprar algo ya hecho: Aurigma Image Uploader es bastante impresionante: $ USD250 para las versiones de ActiveX y Java. Hay algunas demos en el sitio, estoy bastante seguro de que Facebook usa el mismo control.

Answer 5

Lo que jao y russau dicen es verdad. La razón es que JavaScript no tiene acceso al sistema de archivos local debido a razones de seguridad. Si JavaScript pudiera "ver" sus archivos de imagen, podría ver cualquier archivo, y eso es peligroso.

Necesita un control de nivel de aplicación para poder hacer esto, y eso significa Flash, Java o Active-X.

Answer 6

Puede cambiar el tamaño de la imagen en el lado del cliente antes de cargarla usando un marco de procesamiento de imágenes.

A continuación, utilicé MarvinJ para crear un código ejecutable basado en el ejemplo de la página siguiente: "Procesamiento de imágenes en el lado del cliente antes de subirlo a un servidor"

Básicamente uso el método Marvin.scale (...) para cambiar el tamaño de la imagen. Luego, cargo la imagen como un blob (usando el método image.toBlob () ). El servidor responde con una URL de la imagen recibida.

/***********************************************
 * 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):<br/><img src=''"+resp+"'' style=''max-width:400px''></img>");
  },
  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());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action=''/backoffice/imageUpload.php'' style=''margin:auto;'' method=''post'' enctype=''multipart/form-data''>
    <input type=''file'' id=''fileUpload'' class=''upload'' name=''userfile''/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>

Answer 7

Solución pura de JavaScript. Mi código cambia el tamaño de JPEG por interpolación bilineal, y no pierde 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);

Answer 8

Tienes varias opciones:

1. Java
2. ActiveX (solo en windows)
3. Silverlight
4. Flash
5. Flex
6. Google Gears (la versión más reciente es capaz de cambiar el tamaño y arrastrar y soltar desde su escritorio)

Investigué mucho buscando una solución similar a la que describiste y hay muchas soluciones que varían mucho en calidad y flexibilidad.

Mi sugerencia es encontrar una solución que hará el 80% de lo que necesita y personalizarlo para satisfacer sus necesidades.