Código de muestra sobre cómo utilizar Canvas para implementar la firma en línea

Con el rápido desarrollo de la tecnología informática y de redes, la tecnología de firma en línea se utiliza cada vez más en oficinas sin papel. Esta operación intuitiva y conveniente no solo puede mejorar en gran medida la eficiencia de la oficina, sino que también utiliza métodos de almacenamiento digital para evitar problemas tradicionales como la dificultad de almacenamiento y recuperación. firmas en papel. En nuestra vida diaria, ya existen muchos escenarios en los que se utiliza la tecnología de firma en línea, como: firma de máquina POS, firma de entrega urgente, firma comercial de banco o agencia gubernamental, etc. Recientemente, estoy trabajando en las necesidades de procesamiento comercial de la empresa, que también involucran firmas en línea. Usamos la tecnología Canvas para implementarlo. A continuación, hablemos sobre cómo usar Canvas para implementar firmas en línea.

Canvas es un elemento nuevo en HTML5, utilizado para dibujar gráficos en páginas web. Fue introducido por Apple en el navegador web Safari 1.3. La razón para extender HTML es que las capacidades de dibujo de HTML en Safari se pueden usar en Mac OS X. Desktop, y Apple también quería una forma de admitir gráficos con secuencias de comandos en Dashboard. Los dos navegadores, Firefox 1.5 y Opera 9, también siguieron el ejemplo de Safari y comenzaron a soportar Canvas.

Ahora bien, la etiqueta Canvas es una de las mayores mejoras de HTML5, porque nos permite implementar el diseño gráfico de páginas web sin utilizar imágenes. Es como un lienzo. No tiene capacidades de dibujo, pero muestra la API de dibujo al cliente JavaScript. Con el soporte de JavaScript, podemos usarlo dentro del alcance del lienzo para lograr el efecto deseado.

Esta función se puede implementar ya sea Canvas, SVG o Flash, pero ¿por qué elegimos Canvas?

En primer lugar, dado que necesitamos admitir plataformas móviles funcionalmente, podemos abandonar Flash directamente. No tiene soporte amigable en el lado móvil, pero tanto Canvas como SVG tienen buenas capacidades multiplataforma.

• Canvas se basa en píxeles y proporciona funciones de dibujo 2D. Las funciones proporcionadas son más primitivas y adecuadas para el procesamiento de píxeles, la representación dinámica y el dibujo con grandes volúmenes de datos. Básicamente, no registrará el proceso de dibujo. mejor Los principales fabricantes también han implementado el mecanismo de aceleración de hardware del lienzo.
• SVG es un vector que proporciona una serie de elementos gráficos con funciones más completas y establece una gran cantidad de objetos interactivos. Es mejor para la interacción en la naturaleza, pero su rendimiento será más débil y es más adecuado para la visualización de imágenes estáticas. -Escenarios de aplicación de visualización e impresión de documentos de fidelidad.

Ambos tienen sus propias áreas de especialización. En base a lo anterior, elegimos Canvas para implementar la función de firma.

A continuación, echemos un vistazo al efecto de implementación.

Después de comprender el origen de Canvas, la selección de tecnología y el efecto de renderizado final, escribiremos desde las cinco partes de creación, dibujo, monitoreo, redibujado y procesamiento de imágenes. Entremos juntos en el mundo del dibujo de Canvas.

Primero, debemos determinar si el navegador es compatible con Canvas:

 isCanvasSupported = (): boolean => { let elem = document.createElement('canvas' return !!(elem.getContext && elem.getContext('2d'));}

Luego, elija crear un lienzo o mostrar indicaciones basadas en los resultados del juicio.

 {isCanvasSupported? <canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}>: Lo sentimos, ¡el navegador actual no admite esta función! }

Sabemos que cada nodo de Canvas tiene un objeto de contexto correspondiente, que podemos obtener pasándole directamente la cadena 2d como único parámetro a través del método getContext() del objeto Canvas. A continuación, obtenemos el elemento Canvas a través de ref y luego obtenemos un entorno de dibujo en el lienzo a través del método getContext ().

 let cxt = this.canvas.getContext('2d');this.setState({cxt: cxt});

El entorno está listo, ¡comencemos a dibujar!

Primero dibuja el camino inicial:

 cxt.beginPath();

Luego establezca el ancho de la línea actual:

 cxt.lineWidth = 5;

Establecer el color de la línea:

 cxt.strokeStyle = '#000';

A través de moveTo y lineTo, dibujamos una línea.

 cxt.moveTo(0,0);cxt.lineTo(150,0);//Dibuja la ruta definida cxt.stroke()

Sin embargo, encontramos que las líneas dibujadas eran bastante rígidas.

En este momento, podemos usar lineCap para cambiar el estilo de los remates de línea al final de la línea y agregar remates de línea redondos en cada extremo para reducir la rigidez de las líneas.

 cxt.lineCap = 'redondo';

Al mismo tiempo, también podemos especificar las esquinas redondeadas cuando las líneas se cruzan configurando lineJoin.

 cxt.lineJoin = 'redondo';

Pero también descubrimos que las líneas dibujadas tienen bordes irregulares obvios. En este momento, necesitamos usar la función de dibujar sombras de elementos proporcionada por Canvas para difuminar los bordes irregulares. Debido a que hay sombras, podemos cambiar el valor de lineWidth de manera apropiada.

 cxt.shadowBlur = 1;cxt.shadowColor = '#000';

¿Se ha vuelto mucho más redondo? En este punto, nuestro método de dibujar líneas está listo. A continuación, echemos un vistazo a cómo monitorear los eventos del lienzo para lograr una ejecución consistente del dibujo.

Debido a que necesitamos ser compatibles tanto con PC como con terminales móviles, debemos determinar los eventos de ejecución correspondientes con anticipación.

 this.state = {eventos: ('ontouchstart' en la ventana)? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}

Una vez inicializado el lienzo, comenzamos a escuchar eventos [0] eventos

 this.canvas.addEventListener(this.events[0], startEventHandler, falso);

Escuche eventos [1] y eventos [2] en la función startEventHandler

 this.canvas.addEventListener(eventos[1], moveEventHandler, falso);this.canvas.addEventListener(eventos[2], endEventHandler, falso);

Aquí viene el punto, nuestro contenido principal es calcular y dibujar el camino cruzado.

 moveEventHandler (evento: cualquiera): void { event.preventDefault(); const {ctx, isSupportTouch} = this.state; const evt = isSupportTouch? event.touches[0] : evento const coverPos = this.canvas.getBoundingClientRect() ; const mouseX = evt.clientX - coverPos.left; evt.clientY - coverPos.top; cxt.lineTo( mouseX, mouseY );

Como sabes sobre Canvas, el lienzo Canvas nos proporciona un espacio plano para dibujar. Cada punto en el espacio tiene sus propias coordenadas, x representa la coordenada horizontal e y representa la coordenada vertical. El origen (0, 0) está ubicado en la esquina superior izquierda de la imagen. La dirección positiva del eje x está a la derecha del origen y la dirección positiva del eje y está hacia abajo desde el origen.

Entonces usamos el método getBoundingClientRect() para obtener la distancia de píxeles a la izquierda y la parte superior del elemento Canvas de la página en relación con la posición de la ventana del navegador, y luego usamos las propiedades de evento clientX y clientY para devolver las coordenadas horizontales y verticales del puntero del mouse a la página del navegador cuando se activa el evento Finalmente, la ruta se dibuja usando lineTo y trazo.

Al mismo tiempo, debemos recordar eliminar eventos [1] y eventos [2] después de que se ejecute el evento eventos [2], de lo contrario provocará un dibujo continuo.

 endEventHandler(evento: cualquiera): void { event.preventDefault(); const {eventos, moveEventHandler, endEventHandler} = this.state; this.canvas.removeEventListener(events[1], moveEventHandler, false); eventos[2], endEventHandler, falso);}

Al repetir repetidamente las operaciones de eventos anteriores, básicamente se realiza nuestra función de firma.

Durante el proceso de firma, es inevitable firmar incorrectamente o firmar de manera demasiado descuidada, por lo que debemos admitir la función de borrar la firma. En este momento, utilizamos el método clearRect () de Canvas para ayudarnos a borrar el contenido. área de lona.

 cxt.clearRect(0, 0, ancho de lienzo, altura de lienzo);

Después del dibujo, aún no hemos terminado, todavía necesitamos cargar y guardar la firma dibujada. En este momento, podemos usar el método toDataURL() para convertir el Canvas en un formato de archivo de imagen general.

Por lo general, podemos realizar directamente la operación para convertirlo en un URI de datos y luego usar ajax para solicitar la carga y listo.

 dataurl = this.canvas.toDataURL('image/png');//ordataurl = this.canvas.toDataURL('image/jpeg', 0.8);

Sin embargo, debido a diversas necesidades comerciales, a veces necesitamos incluir otro contenido en la página. En este momento, podemos usar html2canvas para lograrlo. html2canvas puede ayudarnos a tomar una captura de pantalla de toda o parte de la página en el lado del navegador y representarla en un Canvas, y luego usamos el método toDataURL() para procesarla.

Hablando de html2canvas, déjame darte un consejo. Las imágenes recortadas en algunos navegadores de versión baja están en blanco. La razón es que se usa el diseño flexible y html2canvas no es compatible con -webkit-flex o -webkit-box. por lo que no puede generar HTML en Canvas, lo que genera una captura de pantalla en blanco.

• No usar diseño flexible
• Modifique el código fuente de html2canvas, agregue -webkit-flex y -webkit-box al archivo html2canvas/dist/npm/parsing/display.js y también devuelva DISPLAY.FLEX Resumen;

A través de los pasos anteriores, básicamente hemos realizado la función de firma en línea. Vale la pena señalar que utilizamos el entorno React + TypeScript para construir este proyecto. El uso real del código anterior debe modificarse adecuadamente según su propio entorno.

Este artículo utiliza conocimientos de dibujo relativamente superficiales de Canvas. Si queremos utilizar Canvas para la producción de animaciones, simulación de efectos físicos, detección de colisiones, desarrollo de juegos, desarrollo de aplicaciones móviles y desarrollo de visualización de big data, también debemos revisar la geometría matemática que tenemos. Aprendí antes, conocimientos de física y luego exploré lentamente. Hoy en día, muchos complementos de gráficos maduros se implementan utilizando Canvas, como Chart.js, ECharts, etc. Hay muchos gráficos hermosos y geniales en ellos, que cubren casi todas las implementaciones de gráficos. Canvas también tiene muchas bibliotecas de código abierto, como ZRender, createJS, Pixi.js, etc. La capa inferior de ECharts también se basa en la biblioteca de clases liviana de Canvas ZRender para la encapsulación.

Bien, dejemos de hablar aquí hoy. Si tiene alguna pregunta, deje un mensaje. Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.