A tela HTML5 implementa a adição de marcas d'água lado a lado às imagens

Recentemente, encontrei um requisito em um projeto que exigia adicionar uma marca d’água lado a lado a uma imagem.

Efeito semelhante

A primeira coisa que me vem à mente é usar o canvas para completar esta função. Porque nunca fui exposto ao canvas antes, então, quando faço essa função, aprendo passo a passo. para implementar essas funções passo a passo e descobrir algumas armadilhas do canvas.

Como esta função requer algumas APIs baseadas em canvas e não envolve nenhum problema principal, colarei diretamente o código js aqui.

 var img = new Image();// Como o negócio do meu projeto é adicionar marcas d'água às imagens do Taobao, aqui está uma imagem principal dos produtos Taobao img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';img.onload = () => { // Preparar ambiente de tela var canvas = document. getElementById(minhaCanvas var ctx =); canvas.getContext(2d); // Primeiro desenhe a imagem na tela ctx.drawImage(img, 0, 0, 200, 200); // Desenhe a marca d'água na tela for (let i = 0; i < 20); i++ ) { ctx.rotate((-45 * Math.PI) / 180); // Ângulo de deflexão inicial da marca d'água ctx.font = 20px microsoft); yahei; ctx.fillStyle = rgba(0,0,0,0.5); marca d'água Ajuste o ângulo de deflexão ao original, caso contrário, ele continuará girando}

HTML

 <altura da tela=200 id=largura da minha tela=200>

Seu navegador não suporta marcas d'água, use o Google Chrome para abri-lo</canvas>

Vamos tentar agora e descobrir que há um erro.

Falha ao executar 'toDataURL' em 'HTMLCanvasElement': telas contaminadas não podem ser exportadas.

Depois de pesquisar no Google, descobri que isso foi causado por um problema de imagem entre domínios. Então, como resolver isso?

Basta adicionar um atributo ao nosso novo img.

img.setAttribute(crossorigin, crossorigin);

Portanto, o código do novo img na parte js torna-se

 var img = new Image();// Como o negócio no meu projeto é adicionar marcas d'água às imagens do Taobao, aqui está uma imagem principal dos produtos Taobao img.setAttribute(crossorigin, crossorigin);// Este código é para resolver o problema de vários domínios Se a sua imagem for sua e não houver problema de vários domínios, você pode remover img.src =. 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';

A seguir, vamos dar uma olhada em nosso produto acabado

O texto acima é a implementação da tela HTML5 introduzida pelo editor para adicionar marcas d'água lado a lado às imagens. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo.