Exemplo de código de como usar o canvas para implementar assinatura online

Com o rápido desenvolvimento da tecnologia de computadores e redes, a tecnologia de assinatura on-line é cada vez mais usada em escritórios sem papel. Essa operação intuitiva e conveniente pode não apenas melhorar muito a eficiência do escritório, mas também usar métodos de armazenamento digital para evitar problemas tradicionais, como dificuldade de armazenamento e recuperação. assinaturas em papel. Em nosso dia a dia, já existem muitos cenários onde a tecnologia de assinatura online é utilizada, como: assinatura em máquina POS, assinatura de entrega expressa, assinatura comercial de banco ou órgão governamental, etc. Recentemente, estou trabalhando nas necessidades de processamento de negócios da empresa, que também envolve assinaturas online. Usamos a tecnologia Canvas para implementá-la. A seguir, vamos falar sobre como usar o Canvas para implementar assinaturas online.

Canvas é um novo elemento em HTML5, usado para desenhar gráficos em páginas da web. Foi introduzido pela Apple no navegador Safari 1.3. A razão para estender o HTML é que os recursos de desenho do HTML no Safari podem ser usados ​​no Mac OS X. desktop. Componente Dashboard, e a Apple também queria uma maneira de oferecer suporte a gráficos com script no Dashboard. Os dois navegadores, Firefox 1.5 e Opera 9, também seguiram o exemplo do Safari e começaram a oferecer suporte ao Canvas.

Já a tag Canvas é uma das maiores melhorias do HTML5, pois nos permite implementar o design gráfico de páginas web sem o uso de imagens. É como uma tela. Não possui recursos de desenho, mas exibe a API de desenho para o JavaScript do cliente. Com o suporte de JavaScript, podemos usá-lo no escopo da tela para obter o efeito desejado.

Esta função pode ser implementada seja Canvas, SVG ou Flash, mas por que escolhemos o Canvas?

Em primeiro lugar, como precisamos oferecer suporte funcional às plataformas móveis, podemos abandonar o Flash diretamente. Ele não tem suporte amigável no lado móvel, mas o Canvas e o SVG têm bons recursos de plataforma cruzada.

• O Canvas é baseado em pixels e fornece funções de desenho 2D. As funções fornecidas são mais primitivas e adequadas para processamento de pixels, renderização dinâmica e desenho de grande volume de dados. melhor. Os principais fabricantes também O mecanismo de aceleração de hardware do canvas foi implementado há muito tempo.
• SVG é um vetor, fornecendo uma série de elementos gráficos com funções mais completas e estabelecendo um grande número de objetos interativos. É melhor na interação na natureza, mas seu desempenho será mais fraco e é mais adequado para exibição de imagens estáticas, altas. -fidelidade de cenários de aplicativos de visualização e impressão de documentos.

Ambos possuem áreas de atuação próprias. Com base no exposto, escolhemos o Canvas para implementar a função de assinatura.

A seguir, vamos dar uma olhada no efeito da implementação.

Depois de compreender a origem do Canvas, a seleção da tecnologia e o efeito de renderização final, escreveremos a partir das cinco partes: criação, desenho, monitoramento, redesenho e processamento de imagem. Vamos entrar juntos no mundo do desenho do Canvas.

Primeiro, precisamos determinar se o navegador suporta Canvas:

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

Em seguida, escolha criar um Canvas ou exibir prompts com base nos resultados do julgamento.

 {isCanvasSupported ? <canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}> :Desculpe, o navegador atual não suporta este recurso! }

Sabemos que cada nó Canvas possui um objeto de contexto correspondente, que podemos obter passando diretamente a string 2d como único parâmetro para ele por meio do método getContext() do objeto Canvas. A seguir, obtemos o elemento Canvas por meio de ref e, em seguida, obtemos um ambiente de desenho na tela por meio do método getContext().

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

O ambiente está pronto, vamos começar a desenhar!

Primeiro desenhe o caminho inicial:

 cxt.beginPath();

Em seguida, defina a largura da linha atual:

 cxt.lineWidth = 5;

Defina a cor da linha:

 cxt.strokeStyle = '#000';

Através de moveTo e lineTo, traçamos uma linha

 cxt.moveTo(0,0);cxt.lineTo(150,0);//Desenhe o caminho definido cxt.stroke()

No entanto, descobrimos que as linhas traçadas eram bastante rígidas

Neste momento, podemos alterar o estilo dos limites de linha no final da linha por meio de lineCap e adicionar limites de linha redondos em cada extremidade para reduzir a rigidez das linhas.

 cxt.lineCap = 'redondo';

Ao mesmo tempo, também podemos especificar os cantos arredondados quando as linhas se cruzam, definindo lineJoin.

 cxt.lineJoin = 'redondo';

Mas também descobrimos que as linhas desenhadas têm bordas irregulares óbvias. Neste momento, precisamos usar a função de desenhar sombras de elemento fornecida pelo Canvas para desfocar as bordas irregulares. Como há sombras, podemos alterar o valor de lineWidth apropriadamente.

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

Ficou muito mais redondo? Neste ponto, nosso método de desenhar linhas está pronto. A seguir, vamos dar uma olhada em como monitorar eventos de tela para obter uma execução consistente do desenho.

Como precisamos ser compatíveis com terminais PC e móveis, precisamos determinar antecipadamente os eventos de execução correspondentes.

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

Após a inicialização do canvas, começamos a ouvir eventos[0] eventos

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

Ouça eventos[1] e eventos[2] na função startEventHandler

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

Aí vem a questão, nosso conteúdo principal é calcular e desenhar o caminho cruzado

 moveEventHandler (evento: qualquer): void { event.preventDefault(); const {ctx, isSupportTouch} = this.state; ; const mouseX = evt.clientX - coverPos.left; evt.clientY - coverPos.top; cxt.lineTo( mouseX, cxt.stroke();}

Como você sabe sobre o Canvas, o Canvas nos fornece um espaço plano para desenhar. Cada ponto no espaço tem suas próprias coordenadas, x representa a coordenada horizontal e y representa a coordenada vertical. A origem (0, 0) está localizada no canto superior esquerdo da imagem. A direção positiva do eixo x está à direita da origem e a direção positiva do eixo y está para baixo a partir da origem.

Portanto, usamos o método getBoundingClientRect() para obter a distância do pixel à esquerda e ao topo do elemento Canvas da página em relação à posição da janela do navegador e, em seguida, usamos as propriedades do evento clientX e clientY para retornar as coordenadas horizontais e verticais do ponteiro do mouse para a página do navegador quando o evento é acionado. Finalmente, o caminho é desenhado usando lineTo e traço.

Ao mesmo tempo, devemos lembrar de remover eventos[1] e eventos[2] após a execução do evento events[2], caso contrário, causará desenho contínuo.

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

Ao repetir repetidamente as operações de evento acima, nossa função de assinatura é basicamente realizada.

Durante o processo de assinatura, é inevitável assinar incorretamente ou de maneira muito descuidada, por isso precisamos apoiar a função de limpeza da assinatura. Neste momento, usamos o método clearRect() do Canvas para nos ajudar a limpar o conteúdo do. área da tela.

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

Após o desenho, ainda não terminamos, ainda precisamos fazer o upload e salvar a assinatura desenhada. Neste momento, podemos usar o método toDataURL() para converter o Canvas em um formato de arquivo de imagem geral.

Normalmente podemos realizar diretamente a operação para convertê-lo em um URI de dados, e então usar o ajax para solicitar o upload e pronto.

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

No entanto, devido a diversas necessidades de negócios, às vezes precisamos carregar outro conteúdo na página. Neste momento, podemos usar html2canvas para conseguir isso. html2canvas pode nos ajudar a fazer uma captura de tela de toda ou parte da página no lado do navegador e renderizá-la em um Canvas, e então usaremos o método toDataURL() para processá-la.

Falando em html2canvas, deixe-me dar uma dica: as imagens que ele corta em alguns navegadores de versão inferior estão em branco. O motivo é que o layout flexível é usado e o html2canvas não suporta -webkit-flex ou -webkit-box, portanto, ele não pode gerar HTML no Canvas, resultando em uma captura de tela branca.

• Não usar layout flexível
• Modifique o código-fonte html2canvas, adicione -webkit-flex e -webkit-box ao arquivo html2canvas/dist/npm/parsing/display.js e também retorne DISPLAY.FLEX Summary;

Através das etapas acima, basicamente realizamos a função de assinatura online. É importante notar que usamos o ambiente React+TypeScript para construir este projeto. O uso real do código acima precisa ser modificado adequadamente com base em seu próprio ambiente.

Este artigo usa conhecimento de desenho relativamente superficial do Canvas. Se quisermos usar o Canvas para produção de animação, simulação de efeitos físicos, detecção de colisões, desenvolvimento de jogos, desenvolvimento de aplicativos móveis e desenvolvimento de visualização de big data, também precisamos revisar a geometria matemática que temos. aprendido antes, conhecimento de física e, em seguida, explorando lentamente. Hoje em dia, muitos plug-ins de gráficos maduros são implementados usando Canvas, como Chart.js, ECharts, etc. Há muitos gráficos bonitos e interessantes neles, cobrindo quase todas as implementações de gráficos. O Canvas também possui muitas bibliotecas de código aberto, como ZRender, createJS, Pixi.js, etc. A camada inferior do ECharts também depende da biblioteca de classes leve do Canvas ZRender para encapsulamento.

Ok, vamos parar de conversar aqui hoje. Se você tiver alguma dúvida, deixe uma mensagem. O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.