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. A continuación, sígueme. para implementar estas funciones paso a paso y descubrir 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
<alto del lienzo=200 id=ancho de mi lienzo=200>
Su navegador no admite marcas de agua, utilice Google Chrome para abrirlo</canvas>
Probémoslo ahora y descubrimos que hay un error.
No se pudo ejecutar 'toDataURL' en 'HTMLCanvasElement': los lienzos contaminados no se pueden exportar.
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.
ResumirLo anterior es la implementación del lienzo HTML5 introducida por el editor para agregar marcas de agua en mosaico a las imágenes. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo.