1

我正在尝试删除图像以揭示秘密信息。

我已经让它工作了，但只能通过浏览包含消息的图像。

如果你看一下截图：

表格是什么样子的

为了完成这项工作，我需要保存图像（阿森纳徽章）。然后使用浏览器再次上传图像以使其工作。我想跳过浏览阶段并通过直接从 div 中抓取图像来自动制作。

有任何想法吗？

这是我的代码（很混乱抱歉）

window.onload = function() {
// add action to the file input
var input = document.getElementById('file');
input.addEventListener('change', importImage);
};
var maxMessageSize = 1000;

$("#desteg").click(function()
{
decode();
});     


var importImage = function(e) {
var reader = new FileReader();

reader.onload = function(event) {
    // set the preview
    document.getElementById('preview').style.display = 'block';
    document.getElementById('preview').src = event.target.result;

    // wipe all the fields clean
    document.getElementById('pass').value = '';
    document.getElementById('ContentArea').innerHTML = '';

    // read the data into the canvas element
    var img = new Image();
    img.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.canvas.width = img.width;
        ctx.canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        decode();
    };
    img.src = event.target.result;
};

reader.readAsDataURL(e.target.files[0]);
};

// encode the image and save it

// decode the image and display the contents if there is anything
var decode = function() {
var password = document.getElementById('pass').value;
var passwordFail = 'Password is incorrect or there is nothing here.';

// decode the message with the supplied password
var ctx = document.getElementById('canvas').getContext('2d');
var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var message = decodeMessage(imgData.data, sjcl.hash.sha256.hash(password));

// try to parse the JSON
var obj = null;
try {
    obj = JSON.parse(message);
} catch (e) {
    // display the "choose" view

    if (password.length > 0) {
        alert(passwordFail);
    }
}

// display the "reveal" view
if (obj) {

    // decrypt if necessary
    if (obj.ct) {
        try {
            obj.text = sjcl.decrypt(password, message);
        } catch (e) {
            alert(passwordFail);
        }
    }

    // escape special characters
    var escChars = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        '\'': '&#39;',
        '/': '&#x2F;',
        '\n': '<br/>'
    };
    var escHtml = function(string) {
        return String(string).replace(/[&<>"'\/\n]/g, function (c) {
            return escChars[c];
        });
    };
    document.getElementById('ContentArea').innerHTML = escHtml(obj.text);
}
};

// returns a 1 or 0 for the bit in 'location'
var getBit = function(number, location) {
return ((number >> location) & 1);
};

// sets the bit in 'location' to 'bit' (either a 1 or 0)
var setBit = function(number, location, bit) {
return (number & ~(1 << location)) | (bit << location);
};

// returns an array of 1s and 0s for a 2-byte number
var getBitsFromNumber = function(number) {
var bits = [];
for (var i = 0; i < 16; i++) {
   bits.push(getBit(number, i));
}
return bits;
};

// returns the next 2-byte number
var getNumberFromBits = function(bytes, history, hash) {
var number = 0, pos = 0;
while (pos < 16) {
    var loc = getNextLocation(history, hash, bytes.length);
    var bit = getBit(bytes[loc], 0);
    number = setBit(number, pos, bit);
    pos++;
}
return number;
};

// returns an array of 1s and 0s for the string 'message'
var getMessageBits = function(message) {
var messageBits = [];
for (var i = 0; i < message.length; i++) {
    var code = message.charCodeAt(i);
    messageBits = messageBits.concat(getBitsFromNumber(code));
}
return messageBits;
};

// gets the next location to store a bit
var getNextLocation = function(history, hash, total) {
var pos = history.length;
var loc = Math.abs(hash[pos % hash.length] * (pos + 1)) % total;
while (true) {
    if (loc >= total) {
        loc = 0;
    } else if (history.indexOf(loc) >= 0) {
        loc++;
    } else if ((loc + 1) % 4 === 0) {
        loc++;
    } else {
        history.push(loc);
        return loc;
    }
}
};

// encodes the supplied 'message' into the CanvasPixelArray 'colors'

// returns the message encoded in the CanvasPixelArray 'colors'
var decodeMessage = function(colors, hash) {
// this will store the color values we've already read from
var history = [];

// get the message size
var messageSize = getNumberFromBits(colors, history, hash);

// exit early if the message is too big for the image
if ((messageSize + 1) * 16 > colors.length * 0.75) {
    return '';
}

// exit early if the message is above an artificial limit
if (messageSize === 0 || messageSize > maxMessageSize) {
    return '';
}

// put each character into an array
var message = [];
for (var i = 0; i < messageSize; i++) {
    var code = getNumberFromBits(colors, history, hash);
    message.push(String.fromCharCode(code));
}

// the characters should parse into valid JSON
return message.join('');
};
4

0 回答 0