openmv 圖像一維數組

跳舞語法 (Dancing Syntax)

介紹 (Introduction)

About a month into the Flatiron School Bootcamp, a friend of mine gave me this advice:

進入Flatiron學校訓練營大約一個月后，我的一個朋友給了我以下建議：

“Learning to read code will help you become a better programmer.”

“學習閱讀代碼將幫助您成為更好的程序員。”

At first, I heard that and thought, “Yeah!” It made sense to me, but while working on labs, I came across some code that I struggled to make sense of:

一開始，我聽到了，然后想：“是的！” 這對我來說很有意義，但是在實驗室工作時，我遇到了一些難以理解的代碼：

Unfamiliar code alert! What’s going on here? What’s a Pixel Matrix?陌生的代碼警報！ 這里發生了什么？ 什么是像素矩陣？

A function called rgbToHex, a pixel matrix, an npm package, some loops, hex codes, and a lot to do with arrays. Fascinating! At a high-level, data.js is loading a file into an npm package called get-pixels, that package is processing the data, which results in a nested array of hex codes. My brain was in overload! I wanted to understand, but so much was unfamiliar. Could I read my way into figuring this out?

名為rgbToHex的函數，像素矩陣，npm包，一些循環，十六進制代碼以及與數組有很大關系的函數。 迷人！ 從高層次上講，data.js正在將文件加載到名為get-pixels的npm包中，該包正在處理數據，這導致嵌套的十六進制代碼數組。 我的大腦超負荷了！ 我想了解，但是非常陌生。 我可以讀一下解決這個問題的方法嗎？

After all, I didn’t need to try to understand it, it’s some helper code for the lab. The purpose of the lab was to learn how information flowed between components in React. The challenge was to finish implementing the functionality for an in-browser pixel drawing app.

畢竟，我不需要嘗試去理解它，它是實驗室的一些幫助代碼。 實驗室的目的是了解React中組件之間信息的流動方式。 挑戰在于完成為瀏覽器內像素繪圖應用程序實現功能。

Painting the learn symbol!畫學習符號！

Okay! Let’s move on, BUT WAIT… What about that code from earlier?

好的！ 讓我們繼續前進，但請等待...早先的代碼呢？

At first glance, I didn’t know what was going on, but transforming images into pixel data and rendering those pixels as divs seemed pretty bomb.com. With my friend’s advice in mind, Let’s pick it apart!

乍一看，我不知道發生了什么，但是將圖像轉換為像素數據并以div形式渲染這些像素似乎是bomb.com。 考慮到我朋友的建議，讓我們把它分開！

獲取像素 (Get-Pixels)

Let’s start with the npm package! After taking a look at the documentation, I found out that Get-Pixels reads the pixel data from an image and returns the result as a ndarray (Nth-Dimensional Array).

讓我們從npm包開始！ 查看文檔后，我發現Get-Pixels從圖像中讀取像素數據，并將結果作為ndarray(第N維數組)返回 。

Specifically, it:

具體來說，它：

“Returns An ndarray of pixels in raster order having shape equal to [width, height, channels].”

“以柵格順序返回形狀等于[寬度，高度，通道]的像素nd陣列?！?

Two things are new to me here: Raster order and ndarrays.After a quick search, I found out that Raster order describes the ordering of an image divided into rows of its pixels called scan lines.

這里有兩件事對我來說是新的： 柵格順序和ndarrays。 快速搜索后，我發現光柵順序描述了將圖像分成像素行(稱為掃描線)的順序。

In this context, get-pixels takes in an image, reads the pixel data from left-right and top-bottom, and then records that image data to a ndarray. With a console.log of the pixels returned, we can begin to see a piece of the multidimensional array and some information about it. More things to learn about!

在這種情況下，get-pixels會攝取圖像，從左至右和從上至下讀取像素數據，然后將該圖像數據記錄到ndarray。 使用console.log記錄的返回像素，我們可以開始查看多維數組的一部分以及有關它的一些信息。 還有更多要學習的東西！

// console.log('got pixels', pixels) line 9 in data.js
//=> got pixels View3duint8 {
data: Uint8Array(2500) [
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255,
... 2400 more items
],
shape: [ 25, 25, 4 ],
stride: [ 4, 100, 1 ],
offset: 0
}

Uint8 is shorthand for unsigned 8bit integer. That means (2?)-1, or 255. It’s commonly known as the value range for RGB color values: Red, Green, and Blue channels. Each channel has a value between 0–255, representing the intensity of its corresponding color. There’s also that sometimes hard to see alpha channel too, but that’s for opacity!

Uint8是無符號8位整數的簡寫。 這表示(2?)-1，即255。通常稱為RGB顏色值的值范圍：紅色，綠色和藍色通道。 每個通道的值在0到255之間，代表其相應顏色的強度。 有時也很難看到Alpha通道，但這是為了不透明！

Laughing cause I made a joke.因為我開了個玩笑。

We also get the shape of this ndarray. That word can kiss it’s bold status goodbye because we’re about to learn about them!

我們也得到了這個ndarray的形狀。 這個詞可以親吻它的大膽地位，因為我們將要了解它們！

陣列 (Ndarray)

An Nth-Dimensional Array is a multidimensional array of items of the same type and size. The number of dimensions and items in the array are defined by the shape, positive integers that specify the sizes of each dimension. They are great for representing images, audio, matrices, strings, and other dimensional data.

第N維數組是相同類型和大小的項目的多維數組。 數組中的維數和項目數由shape定義，正整數指定每個維的大小。 它們非常適合表示圖像，音頻，矩陣，字符串和其他維度數據。

Ndarrays are themselves a part of a Python package called NumPy — a library of code for scientific computing in Python. The library provides a variety of data types for integers and floats, the multidimensional array itself, and methods to operate, transform, and iterate on the ndarrays.

Ndarrays本身就是稱為NumPy的Python程序包的一部分， NumPy是用于Python中科學計算的代碼庫。 該庫為整數和浮點數提供了多種數據類型，多維數組本身以及在ndarray上進行操作，轉換和迭代的方法。

Get-Pixels uses sciJS, a Javascript library that allows you to implement similar functionality to NumPy’s scientific computing.

Get-Pixels使用sciJS (一個Javascript庫)，該庫可讓您實現與NumPy的科學計算類似的功能。

Cool! Let’s visualize this. A Rubix Cube!

涼！ 讓我們將其可視化。 魔方！

A 3D array with a shape of (3, 3, 3), a Rubik’s cube!形狀為(3、3、3)的3D陣列，即魔方！

Now in code, it is an array of 6 3x3 arrays:

現在在代碼中，它是6個3x3數組的數組：

REPL Showing a representation of a Solved Rubiks Cube in Javascript codeREPL用Javascript代碼顯示已解決的Rubiks多維數據集的表示形式

Okay, that was a ton of googling, drawing, and REPL fun y’all. Now we know a bit more about nd-arrays. With all of the knowledge gathered, we can figure out how data.js does all its magic.

好的，這是很多Google搜尋，繪圖和REPL的樂趣。 現在，我們對nd數組有了更多了解。 收集了所有知識之后，我們可以弄清楚data.js如何發揮其全部魔力。

破解密碼 (Cracking the Code)

Going back to that original console.log, we now know that this is a 3-Dimensional Array of RGB color values, It has a shape equal to its width, height, and channels. In this case [25W, 25H, 4Channels(RGBa)

回到原始的console.log，我們現在知道這是RGB顏色值的3維數組，其形狀等于其寬度，高度和通道。 在這種情況下[25W，25H，4通道(RGBa)

// console.log('got pixels', pixels) line 9 in data.js
//=> got pixels View3duint8 {
data: Uint8Array(2500) [
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255,
... 2400 more items
],
shape: [ 25, 25, 4 ],
stride: [ 4, 100, 1 ],
offset: 0Function to convert RGB values into RR GG BB hex values將RGB值轉換為RR GG BB十六進制值的功能

We see the first function from the file takes in a single RGB value and converts that value to a hexadecimal string. If that string is only one character long, add a 0 to it.

我們看到文件中的第一個函數采用單個RGB值，并將該值轉換為十六進制字符串。 如果該字符串只有一個字符長，請向其添加一個0。

Number(255).toString(16) //=> "ff" or 'red' in hex.

Now we can look at those fancy loops and derive what is happening:

現在我們可以看一下這些奇特的循環并得出正在發生的事情：

Traversing the ndarray to convert each pixel value into a full hex color code.遍歷ndarray將每個像素值轉換為完整的十六進制顏色代碼。

First, we traverse the height, then the width of the 3Darray with for loops. Each loop is set to terminate before it’s pointer gets to our width and height values from the shape.

首先，我們遍歷高度，然后遍歷3Darray的寬度并使用for循環。 每個循環都設置為在指針從形狀到達我們的寬度和高度值之前終止。

let row = ['#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF']

Declare a variable and assign it an array of white color hex codes. This array is forming a single line of white hex color pixels to begin our raster scan. We’re building a frame for our picture.

聲明一個變量，并為其分配白色十六進制代碼數組。 該陣列形成一行白色十六進制彩色像素，以開始我們的光柵掃描。 我們正在為圖片建立框架。

The Hex codes are built here, using rgbToHex as a callback.使用rgbToHex作為回調在此處構建十六進制代碼。

If we look closely at this line, you see that we are targeting each pixel element across the RGB channels, converting the values into hex code pieces, and including an octothorpe in the beginning. Then we push those codes onto the end of the row array.

如果我們仔細觀察這條線，您會發現我們以RGB通道中的每個像素元素為目標，將這些值轉換為十六進制代碼段，并在開始處包含一個八面體。 然后，將這些代碼推送到行數組的末尾。

Traversing the ndarray to convert each pixel value into a full hex color code.遍歷ndarray將每個像素值轉換為完整的十六進制顏色代碼。

Line 7–8: Once the loop reaches the end, push on another line of white hex colors, push the completed row into a container array, then start again at the next step down in our height loop. We continue building rows like this, mimicking the pattern of the raster scan building left-right, top-bottom.

第7-8行：循環結束時，推另一行白色十六進制顏色，將完成的行推入容器數組，然后在高度循環中的下一個步驟再次開始。 我們繼續像這樣構建行，以模仿從左到右，從上到下的光柵掃描模式 。

One sort of optimization that we could make is making the loops terminate dynamically based on the shape value we have access to.

我們可以進行的一種優化是使循環根據我們可以訪問的形狀值動態終止。

for (let y = 0; y < 25; y++)change to:for (let y = 0; y < pixels.shape[0]; y++)for (let x = 0; x < 25; x++)change to:for (let x = 0; x < pixels.shape[1]; x++)

I said this is a -sort of- optimization because it is playing with fire. It’s great if you don’t precisely know the pixel dimensions of your image, it’s also terrible if your image has large pixel dimensions. Though, I’d argue that you would rarely use this method of processing a large image anyways, so have fun!

我說這是一種優化，因為它在玩火。 如果您不完全了解圖像的像素尺寸，那就太好了，如果圖像的像素尺寸很大，那也很糟糕。 不過，我認為您還是很少會使用這種處理大圖像的方法，所以請盡情享受！

The completed array of hex values looks like this:

十六進制值的完整數組如下所示：

The Learn logo represented as a multidimensional array of hex color codes in Raster scan order.學習徽標表示為按光柵掃描順序的十六進制顏色代碼的多維數組。

結論 (Conclusion)

Whew! That’s long, I went ahead and processed a different image to bring you joy. There’s more code going on behind the scenes, but since you know about Raster order, I’m sure you can figure it out!

ew！ 很長一段時間，我繼續進行處理，并制作了不同的圖像，以帶給您快樂。 幕后還有更多代碼在做，但是由于您了解Raster的順序，因此我敢肯定您會發現的！

So what did we learn from all this? We learned about:

那么我們從這一切中學到了什么？ 我們了解到：

multidimensional arrays

多維數組

Two npm packages: get-pixels and scijs/ndarray

兩個npm軟件包：get-pixels和scijs / ndarray

Raster scan order

柵格掃描順序

A starting point for solving a Rubik’s cube algorithmically

從算法上解決魔方的起點

Creating fun things with divs.

使用div創建有趣的事物。

Reading and dissecting code that is unfamiliar to you is a great way to stretch your brain and get exposed to new information.

整理和剖析您不熟悉的代碼是擴展您的大腦并接觸新信息的好方法。

Enjoy!

請享用！

資料來源： (Sources:)

npmJS: Get-Pixels

npmJS：獲取像素

Wikipedia: Raster Scan

維基百科：光柵掃描

Github: sciJs/ndarray library

Github：sciJs / ndarray庫

W3Resource: NumPy

W3資源：NumPy

W3Resource: ndarray

W3資源：ndarray

W3Schools: Hex Colors

W3Schools：十六進制顏色

W3Schools: RGB Colors

W3Schools：RGB顏色

翻譯自: https://medium.com/weekly-webtips/demystifying-unfamiliar-code-ndarrays-and-get-pixels-34e0db4ac7ce

openmv 圖像一維數組

總結

以上是生活随笔為你收集整理的openmv 图像一维数组_第N维数组和图像处理。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。