如何使用正確的x，y將畫布圖像數據轉換爲每像素文本值的數組？

我有一塊產生一個隨機圖像的代碼，但我想解析圖像，使我得到這樣的，我可以寫一個文件：如何使用正確的x，y將畫布圖像數據轉換爲每像素文本值的數組？

[data],[data],[data] 
[data],[data],[data]

凡左上角數據將是0,0像素的文本形式（假設0,0是左上角），因此上述數據將是2×3像素圖像，並且0,1數據將在正確的位置。

因此，基本上如果圖像是12x12像素，那麼文件將有12行，每個包含12個數據點（據我瞭解，每個像素有4個顏色/ alpha值）。

下面是創建圖像的循環，所以也許有一種方法在表單中提取上述這裏面的數據：

for(var i = 0, len = image.data.length; i < len; i += 4){ 
    var x = Math.floor((i/4) % dstCanvas.width); 
    var y = Math.floor((i/4)/dstCanvas.width); 

    // since n is -1..1, add +1 and multiply with 127 to get 0..255 
    var n = (noise.turbulence(x/gridSize, y/gridSize, 0, dstCanvas.width) + 1) * 127; 

    image.data[i] = n; 
    image.data[i+1] = n; 
    image.data[i+2] = n; 
    image.data[i+3] = 255; 
}

來源

2013-10-16 BigOmega

這是一個目前還不清楚，但對我來說，你試着做什麼：什麼格式應像素的字符串版本是是否用於介紹或轉移？生成的表格是實際的表格還是應該是文本？兩條數據線是否只有兩個版本（文本/數字）具有相同的像素，並且下一個圖像行應該在下面還是水平地繼續？請詳細說明。 – K3N

您說過：「左上角的數據將是0,0像素的文本形式（假設0,0是左上角），因此上述數據將是2x3像素圖像，並且0,1數據將是在正確的地方。「 - 什麼是「0,1數據」，此外，什麼是「正確的地方」，你怎麼知道 - 你如何計算它。和Ken一樣，你的問題對我來說還不清楚。 – enhzflep

@enhzflep對不起，我已經添加了一些粗體信息，應該清除一些東西... – BigOmega

你可以簡單地做：

var txtFile = ''; 

for(var i = 0, len = image.data.length; i < len; i += 4){ 
    var x = Math.floor((i/4) % dstCanvas.width); 
    var y = Math.floor((i/4)/dstCanvas.width); 

    // since n is -1..1, add +1 and multiply with 127 to get 0..255 
    var n = (noise.turbulence(x/gridSize, y/gridSize, 0, dstCanvas.width) + 1) * 127; 

    image.data[i] = n; 
    image.data[i+1] = n; 
    image.data[i+2] = n; 
    image.data[i+3] = 255; 

    /// handle textfile lines  
    if (x === 0 && y > 0) { 
     /// chop off last comma and add linefeed 
     txtFile = txtFile.substring(0, txtFile.length - 1) + '\n'; 
    } 

    /// textual representation 
    txtFile += 'rgba(' + n + ',' + n + ',' + n + ', 255),'; 
} 

/// for final line 
txtFile = txtFile.substring(0, txtFile.length - 1) + '\n';

文本格式僅僅是一個例子，因爲您沒有指定確切的格式 - 只需根據需要進行調整即可。

然後循環完成後，你可以在「文件」轉換成BLOB和連接它作爲一個參考錨標記：如果您想擁有手動創建標籤

var file = new Blob([txtFile], {type:'text/text'}); 
var domURL = self.URL || self.webkitURL || self, 
var url = domURL.createObjectURL(file); 

var a = document.getElementById('fileAnchor'); 
a.href = url; 
a.download = 'filename.txt';

在HTML ：

<a href="#" id="fileAnchor">Click here to download</a>

ONLINE DEMO HERE

來源

2013-10-17 18:40:08 K3N

如何使用正確的x，y將畫布圖像數據轉換爲每像素文本值的數組？

回答

相關問題