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
<canvas height=200 id=myCanvas width=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.
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
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
Vous avez terminé.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.