Vous ne verrez pas de performances spectaculaires, mais l'une des façons d'aborder cette question consiste simplement à parcourir les pixels de votre image en camembert.
Appelez getImageData() sur l'image de votre camembert pour acquérir toutes les données de pixels de l'image (c'est-à-dire demander les dimensions maximales). De même, appelez le getImageData() sur le drapeau que vous souhaitez rechercher. Configurez une boucle qui itère sur tous les pixels acquis à partir du graphique à secteurs. Pour chaque pixel, supposons qu'il s'agit du coin supérieur gauche (ou d'un autre coin basé sur votre ordre d'itération) du drapeau que vous recherchez. Comparez-le au premier pixel de vos données de pixels de drapeau, et si elles sont d'accord, continuez d'itérer dans une taille de fenêtre égale à la largeur et à la hauteur de votre drapeau. Si vous arrivez à la fin de l'itération de la fenêtre et que chaque paire de pixels correspond, vous avez trouvé le drapeau que vous recherchez. Si ce n'est pas le cas, passez au pixel suivant dans les données du graphique à secteurs et recommencez l'opération sur la fenêtre.
Notez que dans le pire des cas vous regardez O([N * W * H] - [W * H]) ou simplement O(N * W * H) avec N = pie chart pixels et W x H = flag dimensions. Vous pourriez probablement améliorer cela en ne faisant pas d'itération sur les fenêtres où vous savez qu'il n'y aura pas de drapeaux, et en déplaçant la fenêtre plus intelligemment. Une fois que vous trouvez un match, vous avez les coordonnées du coin où vous voulez appeler drawImage() pour y coller votre nouveau drapeau.
Bien sûr, cette approche suppose que le drapeau que vous recherchez est représenté exactement dans l'image graphique. Si vous comparez un indicateur non compressé à une image de graphique à secteurs compressée, ou vice versa, vous ne trouverez pas de correspondance. De même, toute variation de taille ou d'orientation va complètement vaincre cette approche. Si vous avez besoin de ce genre de souplesse, vous vous frayez un chemin dans un territoire comme SIFT. Bien que je suis sûr que cela pourrait être mis en œuvre en utilisant des éléments de toile, je ne voudrais pas être le seul à le faire.
Dans cette situation, vous devez vous assurer que vous ne parcourez pas le DOM inutilement pendant les itérations. En particulier, vous voudrez stocker des références locales aux données de pixel comme expliqué ici: http://www.onaluf.org/en/entry/13
Cela ne va pas être trivial - doit-il * être * automatisé? Si le nouveau drapeau est plus petit que l'ancien, d'où viendraient les pixels d'arrière-plan? –
Vous devez être plus précis. N'y a-t-il aucun moyen de modifier l'image originale en quelque sorte? –
L'image n'existe pas. – epascarello