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

Dans notre vie quotidienne, il existe déjà de nombreux scénarios dans lesquels la technologie de signature en ligne est utilisée. Cet article présente principalement l'exemple de code sur la façon d'utiliser Canvas pour implémenter la signature en ligne. L'éditeur pense que c'est plutôt bien. avec vous et donnez-le à tout le monde. Suivons l'éditeur pour y jeter un coup d'œil

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é et l'utilisation du bureau. méthodes de stockage numérique pour éviter des problèmes tels que les difficultés liées au stockage et à la récupération traditionnels des 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 !

Qu'est-ce que Canvas ?

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 HTML est que HTML Le dessin. Les fonctionnalités de Safari sont disponibles dans le composant Dashboard du bureau Mac OS X, 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.

Maintenant, 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 qui n'a pas la capacité de se dessiner lui-même, mais il affiche l'API de dessin au client JavaScript. Avec le support de JavaScript, nous pouvons l'utiliser dans le cadre du canevas pour obtenir l'effet souhaité.

Sélection de la technologie

Cette fonction peut être implémentée qu'elle 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 simplement abandonner Flash. Il n'a pas de support convivial du côté mobile, mais Canvas et SVG ont tous deux de bonnes capacités multiplateformes. choisissons-nous ? Comparons-les ci-dessous.

• 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. n'enregistre pas le processus après le dessin, les performances de dessin seront meilleures et les principaux fabricants ont déjà implémenté 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 est plus adapté à l'affichage d'images statiques, aux scénarios d'application pour la visualisation et l'impression de documents haute fidélité.

Les 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.

Maintenant, examinons l'effet de mise en œuvre.

Après avoir compris la source de Canvas, la sélection de la technologie et l'effet de présentation final, nous écrirons ensuite à partir des cinq parties de la création, du dessin, de la surveillance, du redessin et du traitement de l'image. , entrons ensemble dans le monde du dessin sur toile.

Créer 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 du résultat du jugement

{isCanvasSupported ?
     <canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}>
    :对不起，当前浏览器暂不支持此功能！
}

Nous savons que chaque nœud Canvas a un Nous pouvons obtenir l'objet contextuel correspondant 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

Dessinez d'abord le chemin de départ :

cxt.beginPath();

Puis définissez 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);
// 绘制已定义的路径
cxt.stroke()

Cependant , nous avons constaté que dessiner Les lignes sont relativement rigides

À ce stade, nous pouvons changer 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 = 'round';

同时，我们还可以通过设置 lineJoin，指定条线交汇时为圆形边角

cxt.lineJoin = 'round';

但我们又发现，绘制的线条有明显的锯齿，此时我们就需要借助 Canvas 为我们提供的绘制元素阴影的功能来模糊边缘出现的锯齿，因为有阴影，所以我们可以适当改变 lineWidth 值

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

是不是变得圆润很多，到这里，我们绘制线路的方法已经准备完事，接下来我们来看一下怎么监听画布事件来实现连贯执行绘制吧！

监听画布事件

因为我们需要同时兼容 PC 端和移动端，所以我们需要事先需要判断一下对应执行的事件

this.state = {
events: ('ontouchstart' in window) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']
}

在画布初始化之后，我们开始监听 events[0] 事件

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

在startEventHandler函数中监听 events[1] 和 events[2] 事件

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

重点来了，我们核心的内容就是计算、描绘划过的路径

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

了解 Canvas 的知道， Canvas 画布为我们提供了一个用来作图的平面空间，该空间的每个点都有自己的坐标，x 表示横坐标，y 表示竖坐标。原点 (0, 0) 位于图像左上角，x 轴的正向是原点向右，y 轴的正向是原点向下。

于是我们通过 getBoundingClientRect() 方法获得页面 Canvas 元素相对浏览器视窗的位置左边和顶部的像素距离，再利用 clientX，clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面的水平和垂直坐标，最后通过 lineTo 和 stroke 来绘制路径。

同时，我们要记得在 events[2] 事件执行之后，移除 events[1]、events[2] 事件，否则会造成一直绘制。

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

如此反复循环上述事件操作，我们的签字功能就基本实现了。

重新绘制

签字过程中，签错或是签的过于潦草是必不可免的，所以我们需要支持清空签字的功能，这时，我们利用 Canvas 的 clearRect() 方法就可以帮助我们清除画布区域内容。

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

图片处理

绘制之后我们还没完事，我们还需要把绘制的签名上传保存。这时，我们可以利用 toDataURL() 方法将 Canvas 转化成一般的图像文件形式。

通常我们直接执行以操作就能转化成 data URI，然后再利用 ajax 请求上传就完事了。

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

但是，由于各种业务需求，我们有时需要携带页面其他内容，这时，我们可以借助 html2canvas 来实现。html2canvas 可以帮助我们对浏览器端整个或部分页面进行截屏，并渲染成一个 Canvas ，然后我们在利用 toDataURL() 方法进行处理。

说道 html2canvas，顺便给大家一个绕坑提示，它在一些低版本浏览器截出来的图片是空白的，原因是使用了flex 布局，而html2canvas并不支持 -webkit-flex 或 -webkit-box，所以无法将 HTML 生成 Canvas，从而导致了截出一张白屏。

解决办法：

• 不使用flex布局

• 修改 html2canvas 源码，在html2canvas\dist\npm\parsing\display.js 文件中增加 -webkit-flex 和 -webkit-box 也返回 DISPLAY.FLEX; 小结

通过以上几步，我们就基本实现了在线签名的功能。值得注意的是，这个项目我们使用的 React+TypeScript 环境构建，上述代码的实际使用需要结合自己环境进行适当修改。

文中使用的是 Canvas 比较浅层的绘制知识，如果想利用Canvas进动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发、大数据可视化开发，还需要我们复习一下之前学过的数学几何、物理方面的知识，然后在慢慢摸索。现在很多成熟的图表插件都是用 Canvas 实现的，例如 Chart.js、ECharts等，里面很多好看炫酷的图表，几乎覆盖了所有图表的实现。Canvas还有很多开源类库，例如 ZRender、createJS、Pixi.js等，ECharts底层也是依赖轻量级的 Canvas 类库 ZRender 进行封装的。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!