javascript - 图像数组元素在函数外为零

Question

我想将图像转换为 Uint8Array，以便在 F5 隐写术中使用 f5stego package .

我尝试使用以下代码，但是当我在函数外部的控制台中打印 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 库，你的代码应该是这样的:

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 文件。

另一个提示:您使用 charCodeAt 将字符串转换为 Uint8Array。这将仅适用于 ASCII 字符，而无法使用 UTF-8 符号。