Bir google map javascript API'sini özel özelliklere, bir tuvale ve ardından bir resme dönüştürmek için html2canvas kullanıyorum.Javascript ile bir resim/HTML kanvasının yarısı nasıl kesilir?
Tüm tarayıcılarda iyi çalışır, IE 11 dışında, görüntünün sağında (tarayıcı penceresinin genişliği - harita genişliği) eşit olan daha fazla boş alan içeren bir görüntü oluşturur. Böylece pencerem daha geniş, sağa doğru daha fazla alan ve vize versa.
Bu resmi (veya HTMLcanvas) gerçek görüntünün (768 piksel genişliğinde) tam kenarında nasıl dilimleyebilirim?
burada bu kodu buldum ama bu görev için onu nasıl değiştirileceğini bilmiyordum: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];
}
Mükemmel görünüyor. Yarın ofise geri döndüğümde ve bir güncelleme yazarken bunu test edeceğim. Teşekkürler! – TetraDev
Güzel bitti, mükemmel çalışıyor. Sizinkileri bir üs olarak kullanan tam kodumu ekleyeceğim. – TetraDev
Anonim işlevin içinde niçin 'görüntüyü döndürmemiz' gerektiğini neden açıklayabilir misiniz? Tam olarak ne yapar? Hala döndürülen değerlerin hemen çağrılan anonim işlevlerin içinde nasıl çalıştığını anlamaya çalışıyorum. – TetraDev