Ich benutze html2canvas, um eine Google Map JavaScript API mit benutzerdefinierten Funktionen in eine Leinwand und dann ein Bild zu verwandeln.Wie schneidet man ein Bild/HTML-Leinwand in zwei Hälften mit Javascript?
Funktioniert in allen Browsern, außer auf IE 11 erzeugt es ein Bild mit zusätzlichem Leerzeichen rechts neben dem Bild, gleich dem (Breite des Browserfensters - Kartenbreite). Je breiter mein Fenster ist, desto mehr Platz rechts und umgekehrt.
Wie kann ich dieses Bild (oder HTMLcanvas) genau an der Kante des eigentlichen Bildes (768px breit) schneiden?
fand ich diesen hier Code, aber nicht wissen, wie es für diese Aufgabe zu ändern:
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];
}
Sieht ausgezeichnet aus. Ich werde das morgen testen, wenn ich wieder im Büro bin und ein Update schreibe. Vielen Dank! – TetraDev
Schön gemacht, funktioniert perfekt. Ich füge meinen vollständigen Code hinzu, der Ihren als Basis verwendet. – TetraDev
Können Sie mir erklären, warum wir innerhalb der anonymen Funktion 'image image' zurückgeben müssen? Was genau macht das? Ich versuche immer noch zu verstehen, wie zurückgegebene Werte in anonymen Funktionen funktionieren, die sofort aufgerufen werden. – TetraDev