Image 對象是表示內存中圖像的本地 DOM 函數，在圖像加載時提供可訪問圖像屬性的回調。canvas 是 DOM 的另一個元素，該元素可以提供訪問像素數組的簡單方式，還可以通過上下文對其進行處理。
因為這兩個都是 DOM 元素，所以如果用 Node.js（或 Web Worker）則無需訪問這些元素。有關其他可替代的方法，請參見下文。
imgRequest
const imgRequest = new Promise((resolve, reject) => {
img.crossOrigin = '';
img.onload = => {
img.width = img.naturalWidth;
img.height = img.naturalHeight;該代碼初始化了一個 new promise，圖像加載成功後該 promise 結束。該示例沒有明確處理誤差狀態。
crossOrigin 是一個允許跨域加載圖像並可以在與 DOM 交互時解決 CORS（跨源資源共享，cross-origin resource sharing）問題的圖像屬性。naturalWidth 和 naturalHeight 指加載圖像的原始維度，在計算時可以強制校正圖像尺寸。
const datasetBytesBuffer =
new ArrayBuffer(NUMDATASETELEMENTS * IMAGESIZE * 4);
57
58 const chunkSize = 5000;
59 canvas.width = img.width;
60 canvas.height = chunkSize;該代碼初始化了一個新的 buffer，包含每一張圖的每一個像素。它將圖像總數和每張圖像的尺寸和通道數量相乘。
我認為 chunkSize 的用處在於防止 UI 一次將太多數據加載到內存中，但並不能 100% 確定。
62 for (let i = 0; i < NUMDATASETELEMENTS / chunkSize; i++) {
63 const datasetBytesView = new Float32Array(
64 datasetBytesBuffer, i * IMAGESIZE * chunkSize * 4,
IMAGESIZE * chunkSize);
66 ctx.drawImage(
67 img, 0, i * chunkSize, img.width, chunkSize, 0, 0, img.width,
68 chunkSize);
69
70 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
該代碼遍歷了每一張 sprite 圖像，併為該迭代初始化了一個新的 TypedArray。接下來，上下文圖像獲取了一個繪製出來的圖像塊。最終，使用上下文的 getImageData 函數將繪製出來的圖像轉換為圖像數據，返回的是一個表示底層像素數據的對象。
72 for (let j = 0; j < imageData.data.length / 4; j++) {
73 // All channels hold an equal value since the image is grayscale, so
74 // just read the red channel.
75 datasetBytesView[j] = imageData.data[j * 4] / 255;
76 }
77 }我們遍歷了這些像素併除以 255（像素的可能最大值），以將值限制在 0 到 1 之間。只有紅色的通道是必要的，因為它是灰度圖像。
78 this.datasetImages = new Float32Array(datasetBytesBuffer);
79
80 resolve;
81 };
82 img.src = MNISTIMAGESSPRITEPATH;
);這一行創建了 buffer，將其映射到保存了我們像素數據的新 TypedArray 中，然後結束了該 promise。事實上最後一行（設置 src 屬性）才真正啟動函數並加載圖像。
起初困擾我的一件事是 TypedArray 的行為與其底層數據 buffer 相關。你可能注意到了，在循環中設置了 datasetBytesView，但它永遠都不會返回。
獲取 DOM 外的圖像數據
如果你在 DOM 中，使用 DOM 即可，瀏覽器（通過 canvas）負責確定圖像的格式以及將緩衝區數據轉換為像素。但是如果你在 DOM 外工作的話（也就是說用的是 Node.js 或 Web Worker），那就需要一種替代方法。
fetch 提供了一種稱為 response.arrayBuffer 的機制，這種機制使你可以訪問文件的底層緩衝。我們可以用這種方法在完全避免 DOM 的情況下手動讀取字節。這裡有一種編寫上述代碼的替代方法（這種方法需要 fetch，可以用 isomorphic-fetch 等方法在 Node 中進行多邊填充）：
const imgRequest = fetch(MNISTIMAGESSPRITE_PATH).then(resp => resp.arrayBuffer).then(buffer => {
return new Promise(resolve => {
const reader = new PNGReader(buffer);
return reader.parse((err, png) => {
const pixels = Float32Array.from(png.pixels).map(pixel => {
return pixel / 255;
});
this.datasetImages = pixels;
resolve;
});
});
});這為特定圖像返回了一個緩衝數組。在寫這篇文章時，我第一次試著解析傳入的緩衝，但我不建議這樣做。如果需要的話，我推薦使用 pngjs 進行 png 的解析。當處理其他格式的圖像時，則需要自己寫解析函數。
有待深入
理解數據操作是用 JavaScript 進行機器學習的重要部分。通過理解本文所述用例與需求，我們可以根據需求在僅使用幾個關鍵函數的情況下對數據進行格式化。
TensorFlow.js 團隊一直在改進 TensorFlow.js 的底層數據 API，這有助於更多地滿足需求。這也意味著，隨著 TensorFlow.js 的不斷改進和發展，API 也會繼續前進，跟上發展的步伐。
原文鏈接：https://medium.freecodecamp.org/how-to-deal-with-mnist-image-data-in-tensorflow-js-169a2d6941dd
✄------------------------------------------------
廣告 & 商務合作：[email protected]
閱讀更多 坤艮機器之心 的文章
