HTML basado en una captura de pantalla de implementación de lienzo

Recuerdo haber visto un intercambio en todos antes, explicando las soluciones de captura de pantalla basadas en JS. Así que esta vez planeo escribir una idea de compartir con todos. Esta es una pequeña demostración muy simple. De acuerdo con la dirección del código PO habitual.

Representaciones

Pensamiento general

• Establezca la tecla de acceso directo de inicio/final
• Después del inicio, DOM se siente atraído por el lienzo para cubrir la interfaz DOM original
• Agregue un área de captura de captura de ratón de simulación de lienzo
• Agregue un lienzo para dibujar la interfaz del navegador correspondiente al área de captura de pantalla del mouse (interceptado desde el primer lienzo)
• Guardar la imagen interceptada

Debido a que las teclas de atajo pueden causar conflictos, las teclas de acceso directo no pueden limitar el número de teclas de acceso directo, por lo que se pasa la forma de una matriz en el primer parámetro.

 Captura de pantalla de funciones (QuickStartKey, EndKey) {// Compatibilidad Considere no usar ... String extendida var keyLength = QuickStartKey.Length var waskeyTrigger = {} var CantShot = false ... Q UickStartKey. Las matrices de parámetros de recorrido es KeyTrigger [item] = false // Todas las claves en la matriz predeterminada no se activan}) $ ('html'). = = Endkey) {...} else if (! CantStartShot) {iskeyTRIGG [keycode] = true var noTRigger = object.Keys (iskeyTRIGER). para activarse}) if (noTrigger.length === 0) {// No hay una clave de acceso directo que deba activarse.

Si adopta un método nativo, puede consultar la introducción de DOM bajo el MDN. Lo más complicado es que necesitas crear un elemento involucrado en una imagen SVG que contenga XML. Cómo calcular el DOM que se muestra en el navegador actual y extraer es en realidad el más tedioso. De hecho, el autor no tiene una buena idea para implementar manualmente uno =. =, Entonces elegí esta biblioteca HTML2Canvas para completar esto. El método de llamada general es el siguiente:

 Función beginShot (CantStartShot) {if (CantStartShot) {html2canvas (document.body, {onrendered: function (Canvas) {// Obtenga la imagen de lona con la misma interfaz})}}}}

La realización de este lugar originalmente tenía la intención de usar el Canvasapi nativo, pero implicó un problema en él. se elimina cuando activó mouseMove. Para simular el proceso de dibujo de tiempo real. El autor indefenso no encontró el método para usar la API nativa de lienzo. Aquí el autor usa una biblioteca de lona basada en JQ llamada JCanvas. Esto satisface las necesidades del autor, y la realización es la siguiente:

 $ ('#' +Canvasid) .MouseDown (function (e) {$ (# +Canvasid) .RemoVelayer (Layername) // Eliminar la capa anterior Layername += 1 startx = that._calculatingxy (e) .x // calcule La posición del mouse Starty = that._calculatingxy (e) .y isshot = true $ (#+canvasid) .addlayer ({type: 'rectangle', // rectangular ... name: layname, el nombre de la capa x: startx, y : Starty, ancho: 1, altura: 1})}). = that._calculatingxy (e) .y var width = mOumTX -Startx var hight = Movey -Starty $ (#+Canvasid) .addlayer ({type: 'rectangle', ... name: Lay: Lay Ername, FromCenter: falso , X: startx, y: starty, ancho: ancho, altura: altura}) $ (#+canvasid) .drayers ();

 var canvasResult = document.getElementById ('CanvasResult') var ctx = CanvasResult.getContext (2d); , 0, 0, ancho, altura) var dataUrl = CanvasResult.todataurl (imagen/png);

Entre ellos, la imagen fue interceptada por DrawImage, y luego la imagen se convirtió en codificación base64 utilizando el método Todataurl

 Function download (el, nombre de archivo, href) {el.attr ({'download': filename, 'href': href})} ... downloadFile ($ ('. Ok'), 'Screenshot' + Math .Random ( .random () .tring ().

Entre ellos, el atributo de descarga de la etiqueta A se puede descargar directamente cuando el usuario hace clic.

 <script src = https: //cdn.bootcss.com/jquery/3.2.1/jqury.min.js> </script> <script src = https: //cdn.bootcss.com/jcanvas/16.7.3/ jcanvas.min.js> </script> <script src = https: //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </script>

 Captura de pantalla ([16, 65], 27) // Inicie la tecla de acceso directo establecido para cambiar+A;

El lugar más desagradable en el artículo (DOM escribe con lienzo y capas de configuración de lienzo) utiliza dos bibliotecas para la implementación, respectivamente. que todavía es un poco. Esencia

Lo anterior es todo el contenido de este artículo.