PNGDriver 将任何文件信息转换为 PNG 图片 - 文章教程

PNGDriver 将任何文件信息转换为 PNG 图片

发布于 2019-11-28 字数 8476 浏览 1450 评论 0

PNGDriver 可以把一个文件(如 JavaScript 文件) 压缩成 PNG 图片文件,实现加密的功能,PNGDriver 支持多种 PNG 图片格式,并提供基于 Web 的解压方案。

PNGDriver 将任何文件信息转换为 PNG 图片

Steganography

PNGDrive 支持 Steganography,什么是 Steganography?我也是第一次听说这个,你可以在百度百科查看详细的信息,说白了就是一种加密的概念,将重要的内容隐藏在其它的文件里面。

生成的 PNG 图片支持不同的位,下面是不同的 PNG 位示例,2、4、6 和 8 从左往右。

PNGDriver 将任何文件信息转换为 PNG 图片

使用方法

引入插件 pngdrive-min.js文件

<script src="pngdrive-min.js"></script>

解码

<script>
    var img = new Image();
    img.src = "image.png";
    img.onload = function() {
        var pngdrive = new PNGDrive(img);
        var numFiles = pngdrive.getFileCount();
        for (var i = 0; i < numFiles; i++) {
            var file = pngdrive.getFileAt(i);
            console.log(file.name, file.type, file.content);
        }
    }
</script>

加密

<div id="file-drop-area">Drop files here</div>

<script>
    var pngdrive = new PNGDrive();

    document.getElementById("file-drop-area").addEventListener('drop', handleFileSelect, false);

    function handleFileSelect(event) {
        event.preventDefault();
        event.stopPropagation();
        var files = event.dataTransfer.files;
        for (var i = 0, file; file = files[i]; i++) {
            pngdrive.addFile(file);
        }
        pngdrive.encode(function() {
            var canvas = this.createImage();
            // etc..
        });
    };
</script>

API文档

PNGDrive(image, bitsPerColorComponent)

  • image (HTMLImageElement or HTMLCanvasElement, optional). The image to decode.
  • bitsPerColorComponent (Number, optional). Valid values: 1-8. Defaults to 8.

Constructor.

var pngdrive = new PNGDrive();

addTextFile(text, name, type)

  • text (String). The contents of the file.
  • name (String). The file name.
  • type (String, optional). The mime type of the file.

Adds a text file to the archive.

pngdrive.addTextFile("PNGDrive rocks!", "info.txt", "text/plain");

addBinaryFile(uint8array, name, type)

  • uint8array (Uint8Array). The contents of the file.
  • name (String). The file name.
  • type (String, optional). The mime type of the file.

Adds a binary file to the archive.

pngdrive.addBinaryFile(new Uint8Array([0x13, 0x37]), "trash.bin");

addFile(file)

  • file (File). The file to add.

Adds a file to the archive.

This method is typically used with <input type="file"> elements or the drop event.

See the encoding example above.

removeAll()

Removes all files from the archive.

removeFileAt(index)

  • index (Integer).

Removes the file at the specified index from the archive.

removeFileByName(name)

  • name (String). The name of the file.

Removes the file with the specified name from the archive.

getFileCount()

Returns the number of files in the archive.

getFileAt(index)

  • index (Integer).

Returns an Object describing the file at the specified index, with the following members:

  • name (String). The file name.
  • type (String). The mime type of the file.
  • content (Uint8Array). The contents of the file.

getFileByName(name)

  • name (String). The name of the file.

Returns an Object describing the file with the specified name, with the following members:

  • name (String). The file name.
  • type (String). The mime type of the file.
  • content (Uint8Array). The contents of the file.

decode(image, bitsPerColorComponent)

  • image (HTMLImageElement or HTMLCanvasElement). The image to decode.
  • bitsPerColorComponent (Number, optional). Valid values: 1-8. Defaults to 8.

Extracts files from the supplied image.

var pngdrive = new PNGDrive();
var image = new Image();
image.src = "image.png";
image.onload = function(event) {
    pngdrive.decode(event.target);
}

See also:

encode(callback)

  • callback (Function, optional). The callback function to call when PNGDrive is done encoding.

Encodes all files into a binary array in preparation to createImage().

var pngdrive = new PNGDrive();
pngdrive.addTextFile("PNGDrive rocks!", "info.txt", "text/plain");
pngdrive.encode(function() {
    var image = this.createImage();
});

See also:

createImage(targetImage, bitsPerColorComponent)

  • targetImage (HTMLImageElement or HTMLCanvasElement, optional). An image to inject data into.
  • bitsPerColorComponent (Number, optional). Valid values: 1-8. Defaults to 8.

Creates a new image with encoded files or, if a target image is supplied, injects encoded files into that image.

Returns HTMLCanvasElement.

See also:

computeImageCapacity(targetImage, bitsPerColorComponent)

  • targetImage (HTMLImageElement or HTMLCanvasElement). An image to inject data into.
  • bitsPerColorComponent (Number, optional). Valid values: 1-8. Defaults to 8.

This method can be used in preparation to createImage() to compute the maximum capacity of a target image.

Returns number of bits that fit into the target image.

See also:

utfEncode(string)

  • string (String). Text to encode.

Returns Uint8Array containing the encoded string.

utfDecode(array)

  • array (Uint8Array). Array to decode.

Returns the decoded string.

文件格式

Bytes 0..1           INTRO (Intro marker, 0xDADA)
Bytes 2              VERSION_HI (File format version info, major)
Bytes 3              VERSION_LO (File format version info, minor)
Bytes 4..7           DIRLEN (Length of DIR in bytes, 32 bits, little endian)
Bytes 8..8+DIRLEN-1  DIR (Directory in JSON format)
Bytes 8+DIRLEN..     PAYLOAD

Example DIR structure:

{
    files: [
        { "name": "text.txt", "size": 12345, "type": "text/plain" },
        { "name": "image.jpg", "size": 23456, "type": "image/jpeg" },
        { "name": "binary.bin", "size": 34567 }
    ]
}

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0