0

ランダムな画像を生成するコードがありますが、画像を解析して、ファイルに書き込むことができる次のようなものを取得したいと考えています。

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

左上のデータが 0,0 のピクセルのテキスト形式である場合 (0,0 が左上隅であると仮定)、上記のデータは 2x3 ピクセルの画像になり、0,1 のデータは適切な場所になります。

したがって、基本的に画像が 12x12 ピクセルの場合、ファイルにはそれぞれ 12 のデータ ポイントを含む 12 行が含まれます (私が理解している限り、各ピクセルには色/アルファの値が 4 つあります)。

画像を作成するループは次のとおりです。おそらく、上記の形式でデータを抽出する方法がここにあります。

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

1 に答える 1

0

あなたは簡単に行うことができます：

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>

オンラインデモはこちら

于 2013-10-17T18:40:08.367 に答える