画像の配列要素が関数の外側でゼロである

Question

f5stego packageでF5ステガノグラフィで使用するには、画像をUint8Arrayに変換する必要があります。

次のコードを使用しようとしましたが、機能外のコンソールにimageArrayを印刷すると0の値を持ち、内部には実際のイメージデータを表す値があります。

var stegKey = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 

var stegger = new f5stego(stegKey); // init stegger with key 

var canvas = document.createElement('canvas'); 
ctx = canvas.getContext('2d'), base64 = 'cover.jpg'; 
canvas.width = 43, canvas.height = 34; 
var image = new Image(); 
var imageArray = new Uint8Array(4624); 
image.onload = (function (canvas, ctx) { 
    return function() { 
     ctx.drawImage(this, 0, 0); 
     var imageData = ctx.getImageData(0, 0, 34, 34); 
     // console.log(imageData.data); 
     imageArray = imageData.data; 
     console.log(imageArray); 
    }; 
})(canvas, ctx); 
image.src = base64; 

console.log(imageArray); 

// Data Array 
var message = "something secret "; 
dataArray = new Uint8Array(message.length); 
for (var i = 0, j = message.length; i < j; ++i) { 
    dataArray[i] = message.charCodeAt(i); 
} 
console.log(dataArray); 

//embed message into image 
var secretImage = stegger.embed(imageArray, dataArray); 
console.log(secretImage); 

//extract message from image 
var message = stegger.extract(secretImage); 
console.log(message); 

Answer 1

あなたは、画素のUint8Arrayに画像を変換しています。しかし、f5stego.js libにはピクセルではなく実際のJPEGファイルバイトが必要です。

base64でエンコードされたJPEGファイルを使用している場合は、この文字列をUint8Arrayに変換するライブラリが必要です。たとえば、this codeを使用できます。

あなたは私がリンクされbase64でのlibを使用する場合は、あなたのコードは次のようなものでなければなりません：

var stegKey = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 

var stegger = new f5stego(stegKey); // init stegger with key 

// just base64 encoded file without data URL scheme 
var base64 = '/9j/4AA............6D/2Q==', 
    imageArray; 

// convert Base64 encoded file to Uint8Array 
imageArray = b64.dec(base64) 

console.log(imageArray); 

// Data Array 
var message = "something secret "; 
dataArray = new Uint8Array(message.length); 
for (var i = 0, j = message.length; i < j; ++i) { 
    dataArray[i] = message.charCodeAt(i); 
} 
console.log(dataArray); 

//embed message into image 
var secretImage = stegger.embed(imageArray, dataArray); 
console.log(secretImage); 

//extract message from image 
var message = stegger.extract(secretImage); 
console.log(message); 

そして、あなたはcanvasを使用して画像を変更すると、その後f5stego.jsでそれを使用する場合は、代わりにtoDataURL機能を使用する必要がありますgetImageDataです。そしてここでもBase64エンコーディングに対処する必要があります。

var stegKey = [1, 2, 3, 4, 5, 6, 7, 8, 9], 
    stegger = new f5stego(stegKey); // init stegger with key 

// Data Array 
var message = "something secret ", 
    dataArray = new Uint8Array(message.length); 
for (var i = 0, j = message.length; i < j; ++i) { 
    dataArray[i] = message.charCodeAt(i); 
} 
console.log(dataArray); 

var canvas = document.createElement('canvas'), 
    ctx = canvas.getContext('2d'), 
    // now we use data URL scheme instead of plain base64 string 
    base64 = 'data:image/jpeg;base64,/9j/4AA............6D/2Q==', 
    image = new Image(), 
    imageArray; 

canvas.width = 43; 
canvas.height = 34; 

image.onload = (function (canvas, ctx) { 
    return function() { 
     ctx.drawImage(this, 0, 0); 
     var imageData = canvas.toDataURL('image/jpeg', 1.0); 

     // imageData is also in data URL scheme. We need to keep base64 part only 
     imageData = imageData.split(',')[1]; 

     // convert Base64 encoded file to Uint8Array 
     imageArray = b64.dec(imageData); 

     console.log(imageArray); 

     //embed message into image 
     var secretImage = stegger.embed(imageArray, dataArray); 
     console.log(secretImage); 

     //extract message from image 
     var message = stegger.extract(secretImage); 
     console.log(message); 
    }; 
})(canvas, ctx); 

image.src = base64 

またF5アルゴリズムの容量が元のファイルサイズの10％のようなものが何であるかを注意してください。この場合、あなたのコードは次のようなものでなければなりません。つまり、1KBのデータを埋め込みたい場合は、少なくとも10KBのjpegファイルが必要です。

別のヒント：文字列をUint8Arrayに変換する場合はcharCodeAtを使用します。これはASCII文字でのみ機能し、UTF-8記号で失敗します。