Exemple de code expliquant comment utiliser Canvas pour implémenter la signature en ligne

Avec le développement rapide de la technologie informatique et réseau, la technologie de signature en ligne est de plus en plus utilisée dans les bureaux sans papier. Cette opération intuitive et pratique peut non seulement améliorer considérablement l'efficacité du bureau, mais utilise également des méthodes de stockage numérique pour éviter les problèmes traditionnels tels que les difficultés de stockage et de récupération. signatures papier. Dans notre vie quotidienne, il existe déjà de nombreux scénarios dans lesquels la technologie de signature en ligne est utilisée, tels que : signature automatique sur point de vente, signature de livraison express, signature commerciale d'une banque ou d'un organisme gouvernemental, etc. Récemment, je travaille sur les besoins de traitement des affaires de l'entreprise, qui impliquent également des signatures en ligne. Nous utilisons la technologie Canvas pour la mettre en œuvre. Parlons ensuite de la façon d'utiliser Canvas pour mettre en œuvre des signatures en ligne !

Canvas est un nouvel élément HTML5, utilisé pour dessiner des graphiques sur des pages Web. Il a été introduit par Apple dans le navigateur Web Safari 1.3. La raison de l'extension du HTML est que les capacités de dessin du HTML dans Safari peuvent être utilisées sur Mac OS X. Desktop. composant Dashboard, et Apple souhaitait également un moyen de prendre en charge les graphiques scriptés dans Dashboard. Les deux navigateurs, Firefox 1.5 et Opera 9, ont également suivi l'exemple de Safari et ont commencé à prendre en charge Canvas.

Désormais, la balise Canvas est l'une des plus grandes améliorations du HTML5, car elle nous permet de mettre en œuvre la conception graphique des pages Web sans utiliser d'images. C'est comme un canevas. Il n'a pas de capacités de dessin, mais il affiche l'API de dessin au client JavaScript. Avec la prise en charge de JavaScript, nous pouvons l'utiliser dans le cadre du canevas pour obtenir l'effet souhaité.

Cette fonction peut être implémentée que ce soit Canvas, SVG ou Flash, mais pourquoi avons-nous choisi Canvas ?

Tout d'abord, puisque nous devons prendre en charge fonctionnellement les plates-formes mobiles, nous pouvons abandonner directement Flash. Il n'a pas de support convivial du côté mobile, mais Canvas et SVG ont tous deux de bonnes capacités multiplateformes.

• Canvas est basé sur des pixels et fournit des fonctions de dessin 2D. Les fonctions fournies sont plus primitives et adaptées au traitement des pixels, au rendu dynamique et au dessin de gros volumes de données. Il est hautement contrôlable et n'enregistre fondamentalement pas le processus après le dessin. mieux. Les principaux fabricants ont également mis en œuvre le mécanisme d'accélération matérielle de Canvas.
• SVG est un vecteur, fournissant une série d'éléments graphiques avec des fonctions plus complètes et établissant un grand nombre d'objets interactifs. Il est meilleur en interaction dans la nature, mais ses performances seront plus faibles et il est plus adapté à l'affichage d'images statiques, élevées. - Scénarios d'application de visualisation et d'impression de documents fidèles.

Tous deux ont leurs propres domaines d'expertise. Sur la base de ce qui précède, nous avons choisi Canvas pour implémenter la fonction de signature.

Examinons ensuite l'effet de mise en œuvre.

Après avoir compris la source de Canvas, la sélection de la technologie et l'effet de rendu final, nous écrirons à partir des cinq parties de création, dessin, surveillance, redessinage et traitement d'image. Entrons ensemble dans le monde du dessin sur Canvas.

Tout d’abord, nous devons déterminer si le navigateur prend en charge Canvas :

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

Choisissez ensuite de créer un canevas ou d'afficher des invites en fonction des résultats du jugement.

 {isCanvasSupported ? <canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}> : Désolé, le navigateur actuel ne prend pas en charge cette fonctionnalité ! }

Nous savons que chaque nœud Canvas a un objet contextuel correspondant, que nous pouvons obtenir en lui passant directement la chaîne 2d comme seul paramètre via la méthode getContext() de l'objet Canvas. Ensuite, nous obtenons l'élément Canvas via ref, puis obtenons un environnement de dessin sur le canevas via la méthode getContext().

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

L'environnement est prêt, commençons à dessiner !

Dessinez d'abord le chemin de départ :

 cxt.beginPath();

Définissez ensuite la largeur de la ligne actuelle :

 cxt.lineWidth = 5 ;

Définissez la couleur de la ligne :

 cxt.StrokeStyle = '#000';

Grâce à moveTo et lineTo, nous traçons une ligne

 cxt.moveTo(0,0);cxt.lineTo(150,0);//Dessiner le chemin défini cxt.stroke()

Cependant, nous avons constaté que les lignes tracées étaient plutôt rigides

À ce stade, nous pouvons modifier le style des extrémités de ligne à la fin de la ligne via lineCap et ajouter des extrémités de ligne rondes à chaque extrémité pour réduire la rigidité des lignes.

 cxt.lineCap = 'rond';

Dans le même temps, nous pouvons également spécifier les coins arrondis lorsque les lignes se croisent en définissant lineJoin.

 cxt.lineJoin = 'rond';

Mais nous avons également constaté que les lignes dessinées ont des bords irréguliers évidents. À ce stade, nous devons utiliser la fonction de dessin des ombres des éléments fournie par Canvas pour rendre flous les bords irréguliers. Comme il y a des ombres, nous pouvons modifier la valeur lineWidth de manière appropriée.

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

Est-il devenu beaucoup plus rond ? À ce stade, notre méthode de dessin de lignes est prête. Voyons ensuite comment surveiller les événements du canevas pour obtenir une exécution cohérente du dessin !

Parce que nous devons être compatibles à la fois avec les PC et les terminaux mobiles, nous devons déterminer à l'avance les événements d'exécution correspondants.

 this.state = {events : ('ontouchstart' dans la fenêtre) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}

Une fois le canevas initialisé, nous commençons à écouter les événements events[0]

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

Écoutez les événements[1] et les événements[2] dans la fonction startEventHandler

 this.canvas.addEventListener(events[1], moveEventHandler, false);this.canvas.addEventListener(events[2], endEventHandler, false);

Voici le point, notre contenu principal est de calculer et de dessiner le chemin croisé

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

Comme vous le savez à propos de Canvas, le canevas Canvas nous fournit un espace plat pour dessiner. Chaque point de l'espace a ses propres coordonnées, x représente la coordonnée horizontale et y représente la coordonnée verticale. L'origine (0, 0) est située dans le coin supérieur gauche de l'image. La direction positive de l'axe des x est à droite de l'origine et la direction positive de l'axe des y est vers le bas par rapport à l'origine.

Nous utilisons donc la méthode getBoundingClientRect() pour obtenir la distance en pixels à gauche et en haut de l'élément Canvas de la page par rapport à la position de la fenêtre du navigateur, puis utilisons les propriétés d'événement clientX et clientY pour renvoyer les coordonnées horizontales et verticales de l'élément Canvas. pointeur de la souris sur la page du navigateur lorsque l'événement est déclenché. Enfin, le chemin est dessiné à l'aide de lineTo et d'un trait.

Dans le même temps, nous devons nous rappeler de supprimer les événements[1] et les événements[2] après l'exécution de l'événement événements[2], sinon cela entraînera un dessin continu.

 endEventHandler(event: any): void { event.preventDefault(); const {events, moveEventHandler, endEventHandler} = this.state; this.canvas.removeEventListener(events[1], moveEventHandler, false); événements[2], endEventHandler, false);}

En bouclant à plusieurs reprises les opérations événementielles ci-dessus, notre fonction de signature est essentiellement réalisée.

Pendant le processus de signature, il est inévitable de signer de manière incorrecte ou trop bâclée, nous devons donc prendre en charge la fonction d'effacement de la signature. À ce stade, nous utilisons la méthode clearRect() de Canvas pour nous aider à effacer le contenu du fichier. zone de toile.

 cxt.clearRect(0, 0, canvasWidth, canvasHeight);

Après le dessin, nous n'avons pas encore terminé, nous devons encore télécharger et enregistrer la signature dessinée. À ce stade, nous pouvons utiliser la méthode toDataURL() pour convertir le canevas en un formulaire de fichier image général.

Habituellement, nous pouvons effectuer directement l'opération pour le convertir en URI de données, puis utiliser ajax pour demander le téléchargement et c'est tout.

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

Cependant, en raison de divers besoins commerciaux, nous devons parfois inclure d'autres contenus sur la page. Pour le moment, nous pouvons utiliser html2canvas pour y parvenir. html2canvas peut nous aider à prendre une capture d'écran de tout ou partie de la page côté navigateur et à la restituer dans un canevas, puis nous utilisons la méthode toDataURL() pour la traiter.

En parlant de html2canvas, laissez-moi vous donner une astuce. Les images découpées dans certains navigateurs de version basse sont vides. La raison en est que la mise en page flexible est utilisée et que html2canvas ne prend pas en charge -webkit-flex ou -webkit-box. il ne peut donc pas générer de HTML dans Canvas, ce qui entraîne une capture d'écran blanc.

• Ne pas utiliser la disposition flexible
• Modifiez le code source de html2canvas, ajoutez -webkit-flex et -webkit-box au fichier html2canvas/dist/npm/parsing/display.js et renvoyez également DISPLAY.FLEX ;

Grâce aux étapes ci-dessus, nous avons essentiellement réalisé la fonction de signature en ligne. Il convient de noter que nous avons utilisé l'environnement React+TypeScript pour créer ce projet. L'utilisation réelle du code ci-dessus doit être modifiée de manière appropriée en fonction de votre propre environnement.

Cet article utilise des connaissances en dessin relativement superficielles de Canvas. Si nous souhaitons utiliser Canvas pour la production d'animations, la simulation d'effets physiques, la détection de collisions, le développement de jeux, le développement d'applications mobiles et le développement de visualisations Big Data, nous devons également revoir la géométrie mathématique dont nous disposons. appris auparavant, connaissances en physique, puis exploration lente. De nos jours, de nombreux plug-ins de graphiques matures sont implémentés à l'aide de Canvas, tels que Chart.js, ECharts, etc. Ils contiennent de nombreux graphiques magnifiques et sympas, couvrant presque toutes les implémentations de graphiques. Canvas possède également de nombreuses bibliothèques open source, telles que ZRender, createJS, Pixi.js, etc. La couche inférieure d'ECharts s'appuie également sur la bibliothèque de classes légère Canvas ZRender pour l'encapsulation.

D'accord, arrêtons de parler ici aujourd'hui. Si vous avez des questions, veuillez laisser un message. Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.