Ritaglia e carica l'immagine sul lato client senza codice lato server coinvolge

Question

Come indicato dal titolo. L'esigenza è di poter ritagliare un'immagine prima di caricare l'immagine ritagliata sul server. Tutto il lavoro dovrebbe essere fatto dal lato del cliente. Ho sentito parlare del metodo per ritagliare l'immagine sul server e salvarla del tutto.

Ma come utilizzo il servizio Parse.com. Non vi è alcun supporto per la manipolazione delle immagini sul lato server, quindi ho bisogno di elaborarlo localmente e caricare l'immagine finita direttamente sul servizio Parse.com.

Il codice di esempio sarebbe molto utile. Grazie.

Answer 1

La soluzione che ho usato:

In primo luogo io uso un 3rd party libreria javascript per selezionare l'area di ritaglio come jCrop. Una volta ottenute le coordinate (x1, x2, y1, y2), disegno una copia di un'immagine su una tela.

  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 

Dopo ho disegnato tela, ho convertito la tela di un DataURL che è in formato base64. Una volta ottenuto il DataURL, utilizzo questa funzione che ho trovato da Internet dove converte DataURL in dati binari non elaborati.

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

Quando abbiamo ottenuto i dati binari, li carichiamo direttamente su Parse.com. Carica per analizzare con 'ia' come dati

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 2

Questo potrebbe essere un vecchio post, ma se avete trovato questa risposta (come me), si potrebbe desiderare di sapere che Parse permette ora di ritagliare le immagini lato server.

Per il codice più recente si dovrebbe fare riferimento alla loro documentazione: https://www.parse.com/docs/cloud_modules_guide#images

Parse Immagine Oggetto (dalla documentazione 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. 
    } 
}); 

Ritaglia immagine (dalla documentazione 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. 
    } 
}); 

È inoltre possibile ridimensionare, modificare il formato dell'immagine e creare miniature.

Answer 3

OK, finalmente ce l'ho fatta !!! dopo aver cercato per un'intera giornata !! Anche ora parse proporre il ritaglio lato server, è comunque interessante avere ridimensionamento lato client.

Controllare questo: la correzione di HTML5 Pre-resize images before uploading

Justin Levene funziona davvero bene! Ma per lavorare con Parse.com, è necessario utilizzare

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

Questi codici funziona per me (per Esempio, ho caricato una foto 2M, la foto ridimensionato sarebbe come 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() { .... 

il "23" è tutte le lettere precedenti alla stringa base64 reale. il risultato di dataurl è "data: image/jpeg; base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2 ......", Abbiamo solo bisogno la parte cominciare da '/ 9 J /'

Buona fortuna!