Recientemente, encontré un requisito en un proyecto que requería agregar una marca de agua en mosaico a una imagen.
Efecto similar
Lo primero que me viene a la mente es usar lienzo para completar esta función. Debido a que nunca antes había estado expuesto a lienzo, cuando hago esta función, aprendo paso a paso. El proceso es bastante bueno. Implemente esta función paso a paso y descubra algunos errores del lienzo.
Debido a que esta función requiere algunas API basadas en lienzo y no implica ningún problema de principio, pegaré directamente el código js aquí.
var img = new Image();// Debido a que el negocio en mi proyecto es agregar marcas de agua a las imágenes de Taobao, aquí hay una imagen principal de los productos de Taobao img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';img.onload = () => { // Preparar el entorno del lienzo var canvas = document. getElementById(miCanvas); var ctx = canvas.getContext(2d); // Primero dibuja la imagen en el lienzo ctx.drawImage(img, 0, 0, 200, 200); // Dibuja la marca de agua en el lienzo for (let i = 0; i < 20; i++) { ctx.rotate((-45 * Math.PI) / 180 // Ángulo de desviación inicial de la marca de agua ctx.font = 20px microsoft); yahei; ctx.fillStyle = rgba(0,0,0,0.5); ctx.fillText(mmmmmmmmmmmmmmmmmmmmmm,-300,i * 25); marca de agua Ajuste el ángulo de desviación al original; de lo contrario, seguirá girando}HTML
<canvas height=200 id=myCanvas width=200>Su navegador no admite marcas de agua, utilice Google Chrome para abrirlo</canvas>
Probémoslo ahora y descubrimos que hay un error.
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Después de buscar en Google, descubrí que esto se debía a un problema de imagen entre dominios. Entonces, ¿cómo solucionarlo?
Simplemente agregue un atributo a nuestra nueva imagen.
img.setAttribute(crossorigin, crossorigin);
Por lo tanto, el código de la nueva img en la parte js se convierte en
var img = new Image();// Debido a que el negocio en mi proyecto es agregar marcas de agua a las imágenes de Taobao, aquí hay una imagen principal de los productos de Taobao img.setAttribute(crossorigin, crossorigin);// Este código es para resolver el problema entre dominios Si su imagen es suya y no hay ningún problema entre dominios, puede eliminar img.src =. 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';
A continuación, echemos un vistazo a nuestro producto terminado.
Ya terminaste.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.