Lưu ảnh chụp màn hình đã chụp sau khi chỉnh sửa

Question

Tôi muốn thực hiện chức năng trong ứng dụng trong đó người dùng có thể chụp nhanh màn hình hiện tại và có thể chú thích nó (sửa đổi/scribble/etc) và sau đó có thể gửi nó trong email. Ứng dụng của tôi sử dụng phonegap cho ios cũng như hỗ trợ Android. Nhưng chủ yếu nó bao gồm javascript/jquery.

Cho đến nay tôi có thể đạt được:

1. Tiết kiệm html hiện tại để canvas (với sự giúp đỡ của html2canvas thư viện)
2. Enable dùng tương tác với canvas rằng việc sử dụng công cụ tự do được cung cấp bởi sketch.js
3. Thêm ghi chú văn bản vào vị trí do người dùng xác định ở bất kỳ đâu trên canvas
4. Mở cửa sổ email mới bằng cách sử dụng phonegap email Composer Plugin

Để cung cấp cảm giác tương tác cho người dùng, tôi đã triển khai các lớp canvas:

1: Lớp đầu tiên sẽ hiển thị ảnh chụp thực tế được chụp qua html2canvas. Để hiển thị ảnh chụp của tôi trên canvas này (captCanvas), tôi đang thiết lập hình nền của canvas thành hình ảnh thu được thông qua thư viện. mã như sau:

$('.myClass').html2canvas({ 

       onrendered: function(canvas) { 

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

       } 
     }); 

2 và 3: Các lớp ở trên sẽ chuyển đổi tùy thuộc vào việc người dùng đã chọn công cụ hoặc công cụ văn bản tự do.

Mọi thứ hoạt động tốt nhưng khi người dùng hoàn tất tương tác với các khung hình riêng biệt, tôi cần phải mang 3 canvas thành một hình ảnh để có thể đính kèm vào email. Tôi có thể kết nối các lớp 2 và 3 bằng cách sử dụng context.drawImage nhưng bằng cách nào đó ảnh chụp nhanh thực sự của tôi mà tôi nhận được từ html2canvas không đi kèm với hình ảnh cuối cùng của tôi.

ảnh chụp cuối cùng của tôi trông như thế này:

Vui lòng cung cấp cái nhìn sâu sắc về vấn đề này.

Answer 1

Lý do mà html2canvas ảnh chụp không xuất hiện là do này:

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

Khi bạn thiết lập nền như thế này bạn sẽ chỉ ảnh hưởng đến vải là một yếu tố bình thường, không phải là nội dung của khung hình riêng của mình. Điều này sẽ không được đăng ký như là một phần của các điểm ảnh trên đó.

Những gì bạn cần làm là để drawImage() kết quả từ html2canvas cũng lên vải chính thức (ví dụ):

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

hay:

$('.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. 
    } 
}); 

(Tôi không biết bạn mã khác khi bạn không hiển thị nó vì vậy hãy điều chỉnh khi cần).