Recientemente, para resolver el registro general de información anormal, el proyecto ha estudiado la función de captura de pantalla de pantalla completa del navegador, para que los usuarios puedan capturas de pantalla rápidamente y enviarlas al administrador cuando encuentren anormalidades. La información final registrada en el registro final es la siguiente.
Introducción a HTML2CanvasEn el pasado, solo podíamos interceptar imágenes a través de otras herramientas de captura de pantalla. La función de los navegadores modernos se ha vuelto más fuerte y más fuerte. HTML2Canvas es un plug -in frontal, y su principio es dibujar el nodo DOM en el lienzo. Aunque es conveniente, existe el siguiente límite:
Debido a que mi escenario de uso es simple, también está definido por mí mismo, y la página anormal también está definida por mí mismo, entonces HTML2Canvas es suficiente.
Usar instanciaCITA JQUERY, HTML2CANVAS se puede usar, y el código es simple. Uso la versión HTML2Canvas 0.5.0 aquí
Html2canvas (#tbl_exception), {onrendered: function (Canvas) {var url = Canvas.todataurl (); pngto (cuerpo);El primer parámetro es el objeto DOM a la captura de pantalla, y el segundo parámetro se representa después del lienzo de recuperación.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| Permiso | Booleano | FALSO | Si permitir que las imágenes de origen cruzado manchen el lienzo |
| fondo | cadena | #fff | Color de fondo de lienzo, si ninguno está SPIECHE en DOM. |
| altura | número | nulo | Defina el heigt del lienzo en píxeles. |
| régimen de letras | Booleano | FALSO | Si debe representar cada letra por separado. |
| explotación florestal | Booleano | FALSO | Si registrar eventos en la consola. |
| apoderado | cadena | indefinido | La URL al proyecto se utilizará para cargar imágenes de origen cruzado. |
| mancha | Booleano | verdadero | Si probar cada imagen si contamina el lienzo antes de dibujarlos |
| Se acabó el tiempo | número | 0 | El tiempo de espera para la carga de imágenes, en milisegundos. |
| ancho | número | nulo | Defina el ancho del lienzo en píxeles. |
| Usecors | Booleano | FALSO | Si intentar cargar imágenes de origen cruzado como Cors Servad, antes de volver a Proxyy |
Después de presentarlo, cuando habla sobre los problemas que encontró en su uso, la captura de pantalla solo puede interceptar el contenido en la pantalla actual. Encuentre una solución después de verificar el código fuente de plug -IN y la depuración. Coloque el código fuente y el código modificado a continuación
Código fuente:
Return renderDocument (node.ownerDocume, options, node.ownerdocument.defaultview.innerwidth, node.ownerdocumew.innerheight, indef x). ) (Options.onrendered está en desuso, html2canvas return, es prometedor que contiene el lienzo);
Modificar código:
// 2016-02-18 Modifique el código fuente para resolver el parámetro que no se puede usar para agregar un ancho personalizado a la pantalla completa para admitir VAR Width = Opciones.width! ! ) {log (options.onrendered está en desuso, html2canvas devuelve una promesa que contiene el lienzo);Es principalmente para permitir a los usuarios personalizar el ancho y la altura del objeto DOM al llamar.
$ (#Btn_Screen) .on (click, function () {html2canvas ($ (#tbl_exception), {altura: $ (#tbl_exception) .outerHeight () + 20, onrendered: fuins. (Canvas) {var url = canvas. Todataurl (); [0] .Click (); ResumirA través del plug -end, la función de captura de pantalla completa del navegador se implementa. Todos están aprendiendo.