làm thế nào để chụp ảnh màn hình vào html sử dụng js hoặc jquery

Question

Tôi đang cần khách hàng tôi có thể chụp ảnh màn hình của bất kỳ trang của trang web của tôi cách sử dụng nút như thế này:

<button>Take screenshot</button>

tôi đã cố gắng để sử dụng html2canvas nhưng nó không hoạt động đúng cho tôi vì tôi có iframe trong trang web của tôi và nó gây ra một số vấn đề phiên.

ai đó có giải pháp cho việc này?

tôi đã xem tất cả trên google và không tìm thấy thứ gì đó giúp ích cho tôi nhiều.

Answer 1

Các trang web không phải là những thứ tốt nhất để được "chụp màn hình", vì bản chất của chúng; chúng có thể bao gồm các phần tử không đồng bộ, khung hoặc thứ gì đó tương tự, chúng thường đáp ứng v.v ...

Với mục đích của bạn, cách tốt nhất là sử dụng api bên ngoài hoặc dịch vụ bên ngoài, tôi nghĩ không nên làm với JS.

Bạn nên cố gắng url2png

Answer 2

bạn có thể sử dụng HTML5 and JavaScript đây là một số mẫu mã mà làm việc cho tôi.

(function (exports) { 
    function urlsToAbsolute(nodeList) { 
     if (!nodeList.length) { 
      return []; 
     } 
     var attrName = 'href'; 
     if (nodeList[0].__proto__ === HTMLImageElement.prototype 
     || nodeList[0].__proto__ === HTMLScriptElement.prototype) { 
      attrName = 'src'; 
     } 
     nodeList = [].map.call(nodeList, function (el, i) { 
      var attr = el.getAttribute(attrName); 
      if (!attr) { 
       return; 
      } 
      var absURL = /^(https?|data):/i.test(attr); 
      if (absURL) { 
       return el; 
      } else { 
       return el; 
      } 
     }); 
     return nodeList; 
    } 

    function screenshotPage() { 
     urlsToAbsolute(document.images); 
     urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']")); 
     var screenshot = document.documentElement.cloneNode(true); 
     var b = document.createElement('base'); 
     b.href = document.location.protocol + '//' + location.host; 
     var head = screenshot.querySelector('head'); 
     head.insertBefore(b, head.firstChild); 
     screenshot.style.pointerEvents = 'none'; 
     screenshot.style.overflow = 'hidden'; 
     screenshot.style.webkitUserSelect = 'none'; 
     screenshot.style.mozUserSelect = 'none'; 
     screenshot.style.msUserSelect = 'none'; 
     screenshot.style.oUserSelect = 'none'; 
     screenshot.style.userSelect = 'none'; 
     screenshot.dataset.scrollX = window.scrollX; 
     screenshot.dataset.scrollY = window.scrollY; 
     var script = document.createElement('script'); 
     script.textContent = '(' + addOnPageLoad_.toString() + ')();'; 
     screenshot.querySelector('body').appendChild(script); 
     var blob = new Blob([screenshot.outerHTML], { 
      type: 'text/html' 
     }); 
     return blob; 
    } 

    function addOnPageLoad_() { 
     window.addEventListener('DOMContentLoaded', function (e) { 
      var scrollX = document.documentElement.dataset.scrollX || 0; 
      var scrollY = document.documentElement.dataset.scrollY || 0; 
      window.scrollTo(scrollX, scrollY); 
     }); 
    } 

    function generate() { 
     window.URL = window.URL || window.webkitURL; 
     window.open(window.URL.createObjectURL(screenshotPage())); 
    } 
    exports.screenshotPage = screenshotPage; 
    exports.generate = generate; 
})(window); 

bạn có thể tìm thấy một bản demo here

Answer 3

Nhìn vào dự án html2canvas. Cách tiếp cận của họ là họ tạo ra một đại diện của trang bên trong một khung vẽ. Họ không tạo ra ảnh chụp màn hình thực tế, nhưng xây dựng nó dựa trên nội dung trên trang và biểu định kiểu đã tải. Nó có thể được sử dụng trên toàn bộ body hoặc chỉ là một phần tử cụ thể.

Nó cũng thực sự dễ sử dụng. Dưới đây là ví dụ:

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 
    } 
}); 

Bạn có thể điều chỉnh mã của bạn tương đối dễ dàng.

Hãy xem demo của chúng. Nhấp vào bất kỳ nút nào và sau đó cuộn xuống cuối trang.