crop di una immagine

[lordalbert]

Ciao,
io dovrei creare una immagine della pagina html mostrata e devo fare il crop di tale immagine. Ho implementato lo script usando la funzione html2canvas per poi elaborarla col metodo .drawImage

Il problema è che l'immagine che crea risulta completamente nera! Mentre prima di applicare il metodo .drawImage, l'immagine risulta perfetta.

Copio il codice, che è sicuramente più esplicativo:

html2canvas(document.body, {
              onrendered: function(canvas) {             
                    var original_img = canvas.toDataURL('image/jpeg');  // ottengo il base64 dell'immagine
                        
                    var new_canvas = document.createElement('canvas');     
                    var ctx = new_canvas.getContext("2d");
                    
                    var x_size = 200;  // le coordinate x su cui fare il crop
                    var y_size = 200;  // le coordinate y su cui fare il crop

                    var img = new Image(); 
                    img.src = original_img;
                    img.onload = function() {
                        ctx.drawImage(img, 0, 0, x_size, y_size);        // context.drawImage(img,x,y,width,height);
                    }
                
                    var new_img = new_canvas.toDataURL('image/jpeg', 1);
                    
                    //window.open(original_img);    // mostra l'immagine corretta
                    //window.open(img.src);            // mostra ancora l'immagine corretta
                    window.open(new_img);            // mostra l'immagine NERA
                        
              }
        });

Avete qualche idea di quale potrebbe essere il problema? Grazie!

[jimbo0]

sono un po' ot, ma non ti conviene croppare lato server ed alleggerire il client?

[lordalbert]

eh no... purtroppo non posso. Devo fare tutto obbligatoriamente lato client.