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 esta função 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
<canvas height=200 id=myCanvas width=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.
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
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
Você terminou.
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.