Düzenledikten sonra yakalanan ekran görüntüsünü kaydettirin

Question

Uygulamamda, kullanıcının geçerli ekranın anlık görüntüsünü alabildiği ve buna açıklama ekleyebileceği (değiştirebileceğim/karalayabileceğimiz/etc) ve bundan sonra bir e-postayla gönderebileceği bir işlev uygulamak istiyorum. Benim app ios yanı sıra android desteği için telefongap kullanır. Ama esas olarak javascript/jquery oluşur.

2. sketch.js
3. tarafından sağlanan serbest aracını kullanarak o tuval ile etkileşim için kullanıcı etkinleştirme (html2canvas kütüphane yardımıyla) tuvaline akım html Kaydetme:

   Şimdiye kadar elde etmek mümkün duyuyorum Herhangi bir yerde kullanıcı tarafından belirlenmiş bir yere metin notları ekleme

4. Yeni bir e-posta açılır penceresini açmak için phonegap adlı kişiyi açın email Composer Plugin

1: İlk katman html2canvas aracılığıyla yakalanan gerçek fotoğrafını gösteriyor olacak etkileşim kullanıcıya hissetmek sağlamak için

, ben tuval katmanlarını uyguladı. Fotoğrafımı bu tuvalde göstermek için (capturedCanvas), tuvalin arka plan resmini kütüphaneden elde edilen görüntüye ayarlıyorum.

$('.myClass').html2canvas({ 

       onrendered: function(canvas) { 

        var capturedCanvas = document.getElementById('capturedImageView'); 
        capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; 

       } 
     }); 

2 ve 3 aşağıdaki gibidir: kodu yukarıda tabakalar bağlı olarak geçiş edip serbest aracı veya metin aracı, seçilen kullanım.

Her şey iyi çalışıyor ancak kullanıcı ayrı ayrı tuvallerle etkileşime geçmeyi bitirdiğinde, e-postaya eklenebilmesi için 3 tuvali tek bir görüntüye getirmem gerekiyor. context.drawImage kullanarak katman 2 ve 3'ü bağlayabiliyorum, ancak bir şekilde html2canvas'tan aldığım gerçek fotoğrafım son görüntüye eşlik etmiyor.

Benim son anlık şöyle görünür:

bu konuda fikir verin.

Answer 1

görünmüyor anlık html2canvas nedeni bu şudur:

capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; 

Böyle bir arka plan ayarlamak zaman sadece normal bir eleman değil, tuval kendisinin içeriği olarak tuval etkileyecektir. Bu, üzerindeki piksellerin bir parçası olarak kaydedilmez.

finalCanvasContext.drawImage(htmlCanvas, 0, 0); 
finalCanvasContext.drawImage(layer1canvas, 0, 0); 
finalCanvasContext.drawImage(layer2canvas, 0, 0); 

ya: Yapmanız Gerekenler

drawImage() için html2canvas gelen sonuç yanı üzerine (örneğin) nihai tuval

$('.myClass').html2canvas({ 

    onrendered: function(canvas) { 

     var capturedCanvas = document.getElementById('capturedImageView'); 
     var ctx = capturedCanvas.getContext('2d'); 
     ctx.drawImage(canvas, 0, 0); 

     //.. continue to allow draw etc. 
    } 
}); 

(Bilmiyorum senin göstermediğiniz diğer kodlar, lütfen gerektiği gibi ayarlayın).