Sto utilizzando html2canvas per trasformare un'API javascript di google map con funzioni personalizzate, in una tela e quindi un'immagine.Come tagliare un'immagine/tela HTML a metà tramite javascript?
Funziona bene su tutti i browser, tranne che su IE 11 genera un'immagine con spazio in più a destra dell'immagine, uguale alla (larghezza della finestra del browser - larghezza della mappa). Quindi più ampia è la mia finestra, più spazio è a destra e viceversa.
Come posso tagliare questa immagine (o HTMLcanvas) esattamente al bordo dell'immagine reale (768px di larghezza)?
ho trovato questo codice qui, ma non sapevano come modificarlo per questo compito:
var image = new Image();
image.onload = cutImageUp;
image.src = 'myimage.png';
function cutImageUp() {
var imagePieces = [];
for(var x = 0; x < numColsToCut; ++x) {
for(var y = 0; y < numRowsToCut; ++y) {
var canvas = document.createElement('canvas');
canvas.width = widthOfOnePiece;
canvas.height = heightOfOnePiece;
var context = canvas.getContext('2d');
context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
imagePieces.push(canvas.toDataURL());
}
}
// imagePieces now contains data urls of all the pieces of the image
// load one piece onto the page
var anImageElement = document.getElementById('myImageElementInTheDom');
anImageElement.src = imagePieces[0];
}
Sembra eccellente. Lo proverò domani quando torno in ufficio e scrivo un aggiornamento. Grazie! – TetraDev
Ben fatto, funziona perfettamente. Aggiungerò il mio codice completo che usa il tuo come base. – TetraDev
Puoi spiegarmi perché è necessario "restituire l'immagine" all'interno della funzione anonima? Cosa fa esattamente? Sto ancora cercando di capire come i valori restituiti funzionano all'interno di funzioni anonime che vengono immediatamente invocate. – TetraDev