Récemment, j'ai rencontré une exigence dans un projet qui nécessitait d'ajouter un filigrane en mosaïque à une image.
Effet similaire
La première chose qui me vient à l'esprit est d'utiliser Canvas pour remplir cette fonction. Parce que je n'ai jamais été exposé à Canvas auparavant, donc lorsque j'exécute cette fonction, j'apprends simplement étape par étape. Le processus est plutôt sympa. pour mettre en œuvre ces fonctions étape par étape et découvrir quelques pièges du canevas.
Étant donné que cette fonction nécessite des API basées sur le canevas et n'implique aucun problème de principe, je vais directement coller le code js ici.
var img = new Image();// Parce que l'objectif de mon projet est d'ajouter des filigranes aux images Taobao, voici donc une image principale des produits Taobao img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';img.onload = () => { // Préparer l'environnement de canevas var canvas = document. getElementById(myCanvas); var ctx = canvas.getContext(2d); // Dessinez d'abord l'image sur le canevas ctx.drawImage(img, 0, 0, 200, 200); // Dessinez le filigrane sur le canevas pour (soit i = 0; i < 20; i++ ) { ctx.rotate((-45 * Math.PI) / 180); // Angle de déviation initial du filigrane ctx.font = 20px microsoft yahei; ctx.fillStyle = rgba(0,0,0,0.5); ctx.fillText(mmmmmmmmmmmmmmmmmmmm,-300,i * 25) ((45 * Math.PI) / 180); filigrane Ajustez l'angle de déviation par rapport à l'original, sinon il continuera à tourner}HTML
<hauteur du canevas = 200 id = largeur de mon canevas = 200>
Votre navigateur ne prend pas en charge les filigranes, veuillez utiliser Google Chrome pour l'ouvrir</canvas>
Essayons-le maintenant et constatons qu'il y a une erreur.
Échec de l'exécution de « toDataURL » sur « HTMLCanvasElement » : les canevas contaminés ne peuvent pas être exportés.
Après une recherche sur Google, j'ai découvert que cela était dû à un problème d'image inter-domaines. Alors, comment le résoudre ?
Ajoutez simplement un attribut à notre nouvelle image.
img.setAttribute(crossorigin, crossorigin);
Par conséquent, le code de new img dans la partie js devient
var img = new Image();// Parce que l'objectif de mon projet est d'ajouter des filigranes aux images Taobao, voici donc une image principale des produits Taobao img.setAttribute(crossorigin, crossorigin);// Ce code est à résoudre le problème inter-domaines Si votre image est la vôtre et qu'il n'y a pas de problème inter-domaines, vous pouvez supprimer img.src =. 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';
Ensuite, jetons un œil à notre produit fini
RésumerCe qui précède est l'implémentation du canevas HTML5 introduite par l'éditeur pour ajouter des filigranes en mosaïque aux images. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps !