Table des matières
Titre :
Analyse
Algorithme de backtracking récursif
Utilisez des algorithmes, des statistiques et calculez les résultats.
Le code final
Le résultat de l'exécution :
Maison interface Web tutoriel HTML Partager une question d'algorithme liée au front-end

Partager une question d'algorithme liée au front-end

Jun 24, 2017 am 11:59 AM
前端 算法 面试

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(&#39;2d&#39;);
    Copier après la connexion
  • js crée un objet image

    let img = new Image;
    img.src = &#39;./image.png&#39;; //图片路径
    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 connexion
  • Stockage 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}` === &#39;210 227 199&#39;){
              coordinates[y][x] = 0;
          }else{
              coordinates[y][x] = 1;
          }
          x++;
          if(x >= 350){
              x = 0;
              y++;
          }
    }
    Copier après la connexion
  • Le code actuel est le suivant :

    (function(){
          let ctxt = canvas.getContext(&#39;2d&#39;);
          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 connexion
  • Comme le montre l'image :


image.png
  • 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;
}
Copier après la connexion

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
    };
}
Copier après la connexion

Le code final

(function(){
        let ctxt = canvas.getContext(&#39;2d&#39;);
        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;
        }
    })();
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

CLIP-BEVFormer : superviser explicitement la structure BEVFormer pour améliorer les performances de détection à longue traîne CLIP-BEVFormer : superviser explicitement la structure BEVFormer pour améliorer les performances de détection à longue traîne Mar 26, 2024 pm 12:41 PM

É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.

Implémentation d'algorithmes d'apprentissage automatique en C++ : défis et solutions courants Implémentation d'algorithmes d'apprentissage automatique en C++ : défis et solutions courants Jun 03, 2024 pm 01:25 PM

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.

Explorez les principes sous-jacents et la sélection d'algorithmes de la fonction de tri C++ Explorez les principes sous-jacents et la sélection d'algorithmes de la fonction de tri C++ Apr 02, 2024 pm 05:36 PM

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 PHP et Vue : une combinaison parfaite d'outils de développement front-end Mar 16, 2024 pm 12:09 PM

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.

Questions fréquemment posées par les enquêteurs front-end Questions fréquemment posées par les enquêteurs front-end Mar 19, 2024 pm 02:24 PM

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.

Algorithme de détection amélioré : pour la détection de cibles dans des images de télédétection optique haute résolution Algorithme de détection amélioré : pour la détection de cibles dans des images de télédétection optique haute résolution Jun 06, 2024 pm 12:33 PM

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

L'intelligence artificielle peut-elle prédire la criminalité ? Explorez les capacités de CrimeGPT L'intelligence artificielle peut-elle prédire la criminalité ? Explorez les capacités de CrimeGPT Mar 22, 2024 pm 10:10 PM

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.

Application d'algorithmes dans la construction de 58 plateformes de portraits Application d'algorithmes dans la construction de 58 plateformes de portraits May 09, 2024 am 09:01 AM

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

See all articles