前端面試的一道算法題（使用canvas解答）

時間  2019-11-06
標籤 前端 面試 一道 算法 使用 canvas 解答 欄目 快樂工作 简体版
原文   原文鏈接

據瞭解，如今前端面試也喜歡考算法題了。前幾天去面試，果不其然的，面試官給我四道算法題，讓我本身回去作。下面說一個跟前端有點相關而且有點趣的一道算法題。html

題目：

平面上有若干個不特定的形狀，以下圖所示。請寫程序求出物體的個數，以及每一個不一樣物體的面積。前端

image.png

分析

想要知道有多少個圖形，想到的就是先獲取圖片中的每個像素點而後判獲取像素點的背景顏色（RGBA）。想要得到圖片中的每個像素點，那就能夠聯想到使用h5的canvas。
以下：面試

菜鳥教程中canvas的getimagedata方法算法

  • 書寫html標籤。canvas

<canvas id="canvas" height="200" width="350">對不你，你的瀏覽器不支持Canvas</canvas>

  • js獲取canvas對象數組

let ctxt = canvas.getContext('2d');

  • js建立image對象瀏覽器

let img = new Image;
img.src = './image.png'; //圖片路徑
img.onload = function(){}  //加載成功後的執行函數，以後的代碼就寫在其中

  • 建立存儲圖片像素點的二維數組函數

let coordinates = [];
for(let i=0; i<200; i++){
       coordinates[i] = [];
}

  • 獲取像素點，也就是使用getimagedata方法。spa

ctxt.drawImage(img, 0, 0);  //將圖片畫如canvas
let data = ctxt.getImageData(0, 0, 350, 200).data;//讀取整張圖片的像素。

  • 將像素存入二維數組code

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++;
        }
}

  • 目前代碼以下：

(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<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++;
                    }
                }
                console.log(coordinates);
        }
    })();

  • 如圖：

image.png

  • 構成相似以下二維數組：

    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

那麼咱們就只須要知道二維數組中這種連續爲1的塊有多少個就知道了圖片中形狀有多少個，而且塊中有多少個1，那麼這個塊的面積就是1的個數。

遞歸回溯算法

//計算連續的面積和個數
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;
}

不熟悉的，直接百度就好，這裏就很少說了，其實代碼就反應了不少信息。

使用算法，統計並計算出結果。

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
    };
}

最後的代碼

(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<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++;
                    }
                }
                // console.log(coordinates);
                let rst = getCountAndArea();
                // console.log(rst);
                console.log('個數： ' + rst.count);
                for(let i=0; i<rst.sum.length; i++){
                    console.log(`第${i+1}個面積爲: ${rst.sum[i].area} px`);
                }
        }
    
        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;
                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;
        }
    })();

運行的結果：

image.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程