javascript - redimensionar - subir y recortar imagenes con jquery y php

Recortar y cargar imágenes en el lado del cliente sin involucrar el código del lado del servidor

Question

Como dijo el título. El requisito es poder recortar una imagen antes de subir la imagen recortada al servidor. Todo el trabajo debe hacerse en el lado del cliente. He oído hablar del método para recortar la imagen en el servidor y guardarla por completo.

Pero a medida que uso el servicio de Parse.com. No se admite la manipulación de imágenes en el lado del servidor, así que debo procesarla localmente y subir la imagen final directamente al servicio de Parse.com.

El código de ejemplo sería muy útil. Gracias.

Answer 1

Esta podría ser una publicación anterior, pero si encuentras esta respuesta (como yo), es posible que desees saber que Parse ahora permite recortar imágenes del lado del servidor.

Para obtener el último código, debe consultar su documentación: https://www.parse.com/docs/cloud_modules_guide#images

Objeto de imagen Parse (de la documentación de Parse):

var Image = require("parse-image");

Parse.Cloud.httpRequest({
  url: object.get("profilePhoto").url(),
  success: function(response) {
    // The file contents are in response.buffer.
    var image = new Image();
    return image.setData(response.buffer, {
      success: function() {
        console.log("Image is " + image.width() + "x" + image.height() + ".");
      },
      error: function(error) {
        // The image data was invalid.
      }
    })
  },
  error: function(error) {
    // The networking request failed.
  }
});

Recortar imagen (de la documentación de Parse):

// Crop the image to the rectangle from (10, 10) to (30, 20).
image.crop({
  left: 10,
  top: 10,
  right: 30,
  bottom: 20,
  success: function(image) {
    // The image was cropped.
  },
  error: function(error) {
    // The image could not be cropped.
  }
});

También puede escalar, cambiar el formato de imagen y crear miniaturas.

Answer 2

La solución que utilicé:

Primero uso una biblioteca de JavaScript de terceros para seleccionar el área de recorte como jCrop. Una vez que obtuve las coordenadas (x1, x2, y1, y2), dibujo una copia de una imagen en un lienzo.

          var canvas = document.getElementById(''drawcanvas''); 
          var context = canvas.getContext(''2d'');
          canvas.width = canvas.width; // clear canvas
          var imageObj = new Image();
          imageObj.onload = function() {
            // draw cropped image
            // ...

            context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, sourceWidth, sourceHeight);

            var dataURL = canvas.toDataURL();
          };
          imageObj.src = // image url

Después de dibujar el lienzo, convertí el lienzo en un DataURL que está en formato base64. Una vez que tengo el DataURL, uso esta función que encontré en Internet, donde convierte el DataURL en datos binarios en bruto.

DataURLConverter: function(data) {
        // convert base64 to raw binary data held in a string
        // doesn''t handle URLEncoded DataURIs
        var byteString = atob(data.split('','')[1]);

        // separate out the mime component
        var mimeString = data.split('','')[0].split('':'')[1].split('';'')[0]

        // write the bytes of the string to an ArrayBuffer
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
            return ia;
}

Cuando obtuvimos los datos binarios, los cargamos directamente en Parse.com. Subir para analizar con ''ia'' como datos

 var serverUrl = ''https://api.parse.com/1/files/'' + fileName;
      $.ajax({
        type: "POST",
        beforeSend: function(request) {
          request.setRequestHeader("X-Parse-Application-Id", "App id");
          request.setRequestHeader("X-Parse-REST-API-Key", "API Key");
          request.setRequestHeader("Content-Type", "File type");
        },
        url: serverUrl,
        data: ia,
        processData: false,
        contentType: false,
        success: function(data) {

        },
        error: function(data) {

        }
      });

Answer 3

OK, ¡finalmente lo logré! después de buscar un día entero !! Incluso ahora, analizar el lado del servidor, todavía es interesante cambiar el tamaño del lado del cliente.

Comprueba esto: HTML5 Pre-cambiar el tamaño de las imágenes antes de subirlas

¡La corrección de Justin Levene funciona realmente bien! Pero para trabajar con Parse.com, debe usar

new Parse.File(name, {base64: somebase64string});

Estos códigos funcionan para mí (por ejemplo, cargué una foto de 2M, la foto de nuevo tamaño sería como 150k):

var dataurl = canvas.toDataURL("image/jpeg");

            var name = "image.jpg";
            var parseFile = new Parse.File(name, {base64: dataurl.substring(23)});

            parseFile.save().then(function() { ....

el "23" es todas las letras antes de la cadena real de base64. el resultado de dataurl es "data: image / jpeg; base64, / 9j / 4AAQSkZJRgABAQAAAQABAAD / 2 ......", solo necesitamos que la parte comience por "/ 9j /"

¡Buena suerte!