Partager une question d'algorithme liée au front-end
Parlons d'une question d'algorithme qui est quelque peu liée au front-end et intéressante.
Titre :
Il existe plusieurs formes non spécifiques sur l'avion, comme le montre la figure ci-dessous. Veuillez écrire un programme pour trouver le nombre d'objets et la superficie de chaque objet différent.

Analyse
Si vous voulez savoir combien de graphiques il y a, la première chose qui vous vient à l'esprit est pour obtenir chaque pixel de l'image Cliquez puis jugez pour obtenir la couleur d'arrière-plan (RGBA) du pixel. Si vous souhaitez obtenir chaque pixel de l'image, vous pouvez penser à utiliser le canevas h5.
Comme suit :
La méthode getimagedata de canvas dans le tutoriel novice
-
Écriture de balises html.
<canvas id="canvas" height="200" width="350">对不你,你的浏览器不支持Canvas</canvas>
Copier après la connexion js obtient un objet canevas
let ctxt = canvas.getContext('2d');
Copier après la connexionjs crée un objet image
let img = new Image; img.src = './image.png'; //图片路径 img.onload = function(){} //加载成功后的执行函数,之后的代码就写在其中
Copier après la connexion-
Créez un tableau bidimensionnel pour stocker les pixels de l'image
let coordinates = [];for(let i=0; i<200; i++){ coordinates[i] = []; }
Copier après la connexion Obtenez les pixels, c'est-à-dire utilisez la méthode getimagedata.
ctxt.drawImage(img, 0, 0); //将图片画如canvas let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。
Copier après la connexionStockage des pixels dans un tableau bidimensionnel
let x=0,y=0; //二维数组的行和列, x:列 y:行 for(let i =0,len = data.length; i<len;i+=4){ let red = data[i],//红色色深 green = data[i+1],//绿色色深 blue = data[i+2],//蓝色色深 alpha = data[i+3];//透明度 //把每个像素点,以二位数组的形式展开 if(`${red} ${green} ${blue}` === '210 227 199'){ coordinates[y][x] = 0; }else{ coordinates[y][x] = 1; } x++; if(x >= 350){ x = 0; y++; } }
Copier après la connexionLe code actuel est le suivant :
(function(){ let ctxt = canvas.getContext('2d'); let img = new Image; let coordinates = []; let h = 200, w = 350; for(let i=0; i<200; i++){ coordinates[i] = []; } img.src = './image.png'; //图片路径 img.onload = function(){ ctxt.drawImage(img, 0, 0); let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。 let x=0,y=0; for(let i =0,len = data.length; i
= 350){ x = 0; y++; } } console.log(coordinates); } })(); Copier après la connexionComme le montre l'image :

forme quelque chose de similaire Le tableau bidimensionnel suivant :
0,0,0,0,0,0,0,0,0,0,0,0
0,0 ,1,1,1,0,0 ,0,0,0,0,0
0,1,1,1,1,0,0,0,0,0,0,0
0 ,1,1,1,0,0 ,0,1,1,1,1,0
0,0,0,0,0,0,1,1,1,0,0,0
0,0,0,0,0 ,0,1,1,1,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0
Ensuite, il nous suffit de savoir combien de blocs consécutifs de 1 il y a dans le tableau bidimensionnel pour savoir combien de formes il y a dans l'image et combien de 1 il y a dans le bloc, alors l'aire de ce bloc est le nombre de 1.
Algorithme de backtracking récursif
//计算连续的面积和个数 const linkSum = (i,j,num)=>{//走过的路就置0 coordinates[i][j] = 0; num++; //向上 if((i+1 < h) && coordinates[i+1][j] == 1){ num = linkSum(i+1 , j , num); } //向下 if((j+1 < w) && coordinates[i][j+1] == 1){ num = linkSum(i , j+1 , num); } //向左 if((i-1 >= 0) && coordinates[i-1][j] == 1){ num = linkSum(i-1 , j , num); } //向右 if((j-1 >= 0) && coordinates[i][j-1] == 1){ num = linkSum(i , j-1 , num); } return num; }
Si vous ne le connaissez pas, allez simplement sur Baidu. Je n'entrerai pas dans les détails ici. En fait, le code reflète beaucoup d'informations. .
Utilisez des algorithmes, des statistiques et calculez les résultats.
const getCountAndArea = () =>{let sum = [];let count = 0;for(let i = 0; i < h; i++) //遍历二维数组 { for(let j = 0; j < w; j++) { //连续1的个数 if(coordinates[i][j] == 1) {let buf = 0; //连续1的个数 buf = linkSum(i,j,buf);count++; //形状的总数 sum.push({ index: count, //第几个形状 area: buf //形状的面积 }); } } }return {count, sum }; }
Le code final
(function(){ let ctxt = canvas.getContext('2d'); let img = new Image; let coordinates = []; let h = 200, w = 350; for(let i=0; i<200; i++){ coordinates[i] = []; } img.src = './image.png'; //图片路径 img.onload = function(){ ctxt.drawImage(img, 0, 0); let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。 let x=0,y=0; for(let i =0,len = data.length; i= 350){ x = 0; y++; } } // console.log(coordinates); let rst = getCountAndArea(); // console.log(rst); console.log('个数: ' + rst.count); for(let i=0; i { let sum = []; let count = 0; for(let i = 0; i < h; i++) { for(let j = 0; j < w; j++) { //连续1的个数 if(coordinates[i][j] == 1) { let buf = 0; buf = linkSum(i,j,buf); count++; sum.push({ index: count, area: buf }); } } } return { count, sum }; } //计算连续的面积和个数 const linkSum = (i,j,num)=>{ //走过的路就置0 coordinates[i][j] = 0; num++; //向上 if((i+1 < h) && coordinates[i+1][j] == 1){ num = linkSum(i+1 , j , num); } //向下 if((j+1 < w) && coordinates[i][j+1] == 1){ num = linkSum(i , j+1 , num); } //向左 if((i-1 >= 0) && coordinates[i-1][j] == 1){ num = linkSum(i-1 , j , num); } //向右 if((j-1 >= 0) && coordinates[i][j-1] == 1){ num = linkSum(i , j-1 , num); } return num; } })();
Le résultat de l'exécution :

Si vous rencontrez des problèmes pendant le processus d'apprentissage ou si vous souhaitez obtenez des ressources d'apprentissage , bienvenue dans le groupe d'échange d'apprentissage
343599877, apprenons le front-end ensemble !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Écrit ci-dessus et compréhension personnelle de l'auteur : À l'heure actuelle, dans l'ensemble du système de conduite autonome, le module de perception joue un rôle essentiel. Le véhicule autonome roulant sur la route ne peut obtenir des résultats de perception précis que via le module de perception en aval. dans le système de conduite autonome, prend des jugements et des décisions comportementales opportuns et corrects. Actuellement, les voitures dotées de fonctions de conduite autonome sont généralement équipées d'une variété de capteurs d'informations de données, notamment des capteurs de caméra à vision panoramique, des capteurs lidar et des capteurs radar à ondes millimétriques pour collecter des informations selon différentes modalités afin d'accomplir des tâches de perception précises. L'algorithme de perception BEV basé sur la vision pure est privilégié par l'industrie en raison de son faible coût matériel et de sa facilité de déploiement, et ses résultats peuvent être facilement appliqués à diverses tâches en aval.

Les défis courants rencontrés par les algorithmes d'apprentissage automatique en C++ incluent la gestion de la mémoire, le multithread, l'optimisation des performances et la maintenabilité. Les solutions incluent l'utilisation de pointeurs intelligents, de bibliothèques de threads modernes, d'instructions SIMD et de bibliothèques tierces, ainsi que le respect des directives de style de codage et l'utilisation d'outils d'automatisation. Des cas pratiques montrent comment utiliser la bibliothèque Eigen pour implémenter des algorithmes de régression linéaire, gérer efficacement la mémoire et utiliser des opérations matricielles hautes performances.

La couche inférieure de la fonction de tri C++ utilise le tri par fusion, sa complexité est O(nlogn) et propose différents choix d'algorithmes de tri, notamment le tri rapide, le tri par tas et le tri stable.

PHP et Vue : une combinaison parfaite d'outils de développement front-end À l'ère actuelle de développement rapide d'Internet, le développement front-end est devenu de plus en plus important. Alors que les utilisateurs ont des exigences de plus en plus élevées en matière d’expérience des sites Web et des applications, les développeurs front-end doivent utiliser des outils plus efficaces et plus flexibles pour créer des interfaces réactives et interactives. En tant que deux technologies importantes dans le domaine du développement front-end, PHP et Vue.js peuvent être considérés comme une arme parfaite lorsqu'ils sont associés. Cet article explorera la combinaison de PHP et Vue, ainsi que des exemples de code détaillés pour aider les lecteurs à mieux comprendre et appliquer ces deux éléments.

Lors des entretiens de développement front-end, les questions courantes couvrent un large éventail de sujets, notamment les bases HTML/CSS, les bases JavaScript, les frameworks et les bibliothèques, l'expérience du projet, les algorithmes et les structures de données, l'optimisation des performances, les requêtes inter-domaines, l'ingénierie front-end, les modèles de conception et les nouvelles technologies et tendances. Les questions de l'intervieweur sont conçues pour évaluer les compétences techniques du candidat, son expérience en matière de projet et sa compréhension des tendances du secteur. Par conséquent, les candidats doivent être parfaitement préparés dans ces domaines pour démontrer leurs capacités et leur expertise.

01Aperçu des perspectives Actuellement, il est difficile d'atteindre un équilibre approprié entre efficacité de détection et résultats de détection. Nous avons développé un algorithme YOLOv5 amélioré pour la détection de cibles dans des images de télédétection optique haute résolution, en utilisant des pyramides de caractéristiques multicouches, des stratégies de têtes de détection multiples et des modules d'attention hybrides pour améliorer l'effet du réseau de détection de cibles dans les images de télédétection optique. Selon l'ensemble de données SIMD, le mAP du nouvel algorithme est 2,2 % meilleur que YOLOv5 et 8,48 % meilleur que YOLOX, permettant ainsi d'obtenir un meilleur équilibre entre les résultats de détection et la vitesse. 02 Contexte et motivation Avec le développement rapide de la technologie de télédétection, les images de télédétection optique à haute résolution ont été utilisées pour décrire de nombreux objets à la surface de la Terre, notamment des avions, des voitures, des bâtiments, etc. Détection d'objets dans l'interprétation d'images de télédétection

La convergence de l’intelligence artificielle (IA) et des forces de l’ordre ouvre de nouvelles possibilités en matière de prévention et de détection de la criminalité. Les capacités prédictives de l’intelligence artificielle sont largement utilisées dans des systèmes tels que CrimeGPT (Crime Prediction Technology) pour prédire les activités criminelles. Cet article explore le potentiel de l’intelligence artificielle dans la prédiction de la criminalité, ses applications actuelles, les défis auxquels elle est confrontée et les éventuelles implications éthiques de cette technologie. Intelligence artificielle et prédiction de la criminalité : les bases CrimeGPT utilise des algorithmes d'apprentissage automatique pour analyser de grands ensembles de données, identifiant des modèles qui peuvent prédire où et quand les crimes sont susceptibles de se produire. Ces ensembles de données comprennent des statistiques historiques sur la criminalité, des informations démographiques, des indicateurs économiques, des tendances météorologiques, etc. En identifiant les tendances qui pourraient échapper aux analystes humains, l'intelligence artificielle peut donner du pouvoir aux forces de l'ordre.

1. Contexte de la construction de la plateforme 58 Portraits Tout d'abord, je voudrais partager avec vous le contexte de la construction de la plateforme 58 Portraits. 1. La pensée traditionnelle de la plate-forme de profilage traditionnelle ne suffit plus. La création d'une plate-forme de profilage des utilisateurs s'appuie sur des capacités de modélisation d'entrepôt de données pour intégrer les données de plusieurs secteurs d'activité afin de créer des portraits d'utilisateurs précis. Elle nécessite également l'exploration de données pour comprendre le comportement et les intérêts des utilisateurs. et besoins, et fournir des capacités côté algorithmes ; enfin, il doit également disposer de capacités de plate-forme de données pour stocker, interroger et partager efficacement les données de profil utilisateur et fournir des services de profil. La principale différence entre une plate-forme de profilage d'entreprise auto-construite et une plate-forme de profilage de middle-office est que la plate-forme de profilage auto-construite dessert un seul secteur d'activité et peut être personnalisée à la demande. La plate-forme de mid-office dessert plusieurs secteurs d'activité et est complexe ; modélisation et offre des fonctionnalités plus générales. 2.58 Portraits d'utilisateurs de l'arrière-plan de la construction du portrait sur la plate-forme médiane 58
