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.Lưu ảnh chụp màn hình đã chụp sau khi chỉnh sửa
Cho đến nay tôi có thể đạt được:
- Tiết kiệm html hiện tại để canvas (với sự giúp đỡ của html2canvas thư viện)
- 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
- 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
- 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.
Cảm ơn bạn đã trả lời Phần mềm Ken-Abdias Tôi sẽ cố gắng thực hiện ý tưởng này và sớm cho kết quả. Chỉnh sửa: Tôi đã thử đề xuất và nó đã hoạt động cho tôi :) cảm ơn một lần nữa! – Vidhi