Hướng dẫn how to use html2canvas in typescript - cách sử dụng html2canvas trong typecript

HTML2Canvas

Trang chủ | Tải xuống | Câu hỏi

Kết xuất JavaScript HTML

Kịch bản cho phép bạn chụp "ảnh chụp màn hình" các trang web hoặc các phần của nó, trực tiếp trên trình duyệt người dùng. Ảnh chụp màn hình dựa trên DOM và do đó có thể không chính xác 100% cho biểu diễn thực vì nó không tạo ảnh chụp màn hình thực tế, nhưng xây dựng ảnh chụp màn hình dựa trên thông tin có sẵn trên trang.

Làm thế nào nó hoạt động?

Kịch bản hiển thị trang hiện tại dưới dạng hình ảnh canvas, bằng cách đọc DOM và các kiểu khác nhau được áp dụng cho các yếu tố.

Nó không yêu cầu bất kỳ kết xuất nào từ máy chủ, vì toàn bộ hình ảnh được tạo trên trình duyệt của máy khách. Tuy nhiên, vì nó phụ thuộc rất nhiều vào trình duyệt, thư viện này không phù hợp để được sử dụng trong nodejs. Nó cũng không phá vỡ bất kỳ hạn chế chính sách nội dung nào, vì vậy, kết xuất nội dung có nguồn gốc chéo sẽ yêu cầu proxy để đưa nội dung đến cùng một nguồn gốc.not require any rendering from the server, as the whole image is created on the client's browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs. It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin.

Kịch bản vẫn ở trạng thái rất thử nghiệm, vì vậy tôi không khuyên bạn nên sử dụng nó trong môi trường sản xuất cũng như không bắt đầu xây dựng các ứng dụng với nó, vì vẫn sẽ có những thay đổi lớn được thực hiện.very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.

Tính tương thích của trình duyệt web

Thư viện sẽ hoạt động tốt trên các trình duyệt sau (với polyfill Promise):

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

Vì mỗi thuộc tính CSS cần được xây dựng thủ công để được hỗ trợ, có một số thuộc tính chưa được hỗ trợ.

Cách sử dụng

Thư viện HTML2Canvas sử dụng Promise và hy vọng chúng sẽ có sẵn trong bối cảnh toàn cầu. Nếu bạn muốn hỗ trợ các trình duyệt cũ hơn không hỗ trợ Promise, vui lòng bao gồm một polyfill như ES6-Promise trước khi bao gồm

   map: {

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  ...............

  // other libraries
  'rxjs': 'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'html2canvas': 'npm:html2canvas' //for html canvas
 }
packages: {
  .................
   rxjs: {
     defaultExtension: 'js'
   },
   html2canvas: {
     main:'./dist/html2canvas.js',
     defaultExtension: 'js'
   }
 }

Để hiển thị

   map: {

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  ...............

  // other libraries
  'rxjs': 'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'html2canvas': 'npm:html2canvas' //for html canvas
 }
packages: {
  .................
   rxjs: {
     defaultExtension: 'js'
   },
   html2canvas: {
     main:'./dist/html2canvas.js',
     defaultExtension: 'js'
   }
 }

   map: {

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  ...............

  // other libraries
  'rxjs': 'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'html2canvas': 'npm:html2canvas' //for html canvas
 }
packages: {
  .................
   rxjs: {
     defaultExtension: 'js'
   },
   html2canvas: {
     main:'./dist/html2canvas.js',
     defaultExtension: 'js'
   }
 }

Hàm trả về một lời hứa chứa phần tử

   map: {

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  ...............

  // other libraries
  'rxjs': 'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'html2canvas': 'npm:html2canvas' //for html canvas
 }
packages: {
  .................
   rxjs: {
     defaultExtension: 'js'
   },
   html2canvas: {
     main:'./dist/html2canvas.js',
     defaultExtension: 'js'
   }
 }

   map: {

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  ...............

  // other libraries
  'rxjs': 'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'html2canvas': 'npm:html2canvas' //for html canvas
 }
packages: {
  .................
   rxjs: {
     defaultExtension: 'js'
   },
   html2canvas: {
     main:'./dist/html2canvas.js',
     defaultExtension: 'js'
   }
 }

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Tòa nhà

Bạn có thể tải xuống các bản dựng sẵn sàng ở đây.

Kho lưu trữ Clone Git:

$ git clone git://github.com/niklasvh/html2canvas.git

Cài đặt phụ thuộc:

$ npm install

Xây dựng gói trình duyệt

$ npm run build

Ví dụ

Để biết thêm thông tin và ví dụ, vui lòng truy cập trang chủ hoặc thử bảng điều khiển thử nghiệm.

Đóng góp

Nếu bạn muốn đóng góp cho dự án, xin vui lòng gửi các yêu cầu kéo đến chi nhánh phát triển. Trước khi gửi bất kỳ thay đổi nào, hãy thử và kiểm tra xem các thay đổi có hoạt động với tất cả các trình duyệt hỗ trợ. Nếu một số thuộc tính CSS không được hỗ trợ hoặc không đầy đủ, vui lòng tạo các thử nghiệm phù hợp cho nó trước khi gửi bất kỳ thay đổi mã nào.