利用 js2image 将代码压缩成圣诞树：技术详解与实践指南

# 创建项目目录
mkdir js2image-christmas-tree && cd js2image-christmas-tree
 
# 初始化 npm 项目
npm init -y
 
# 安装依赖
npm install canvas terser lz-string

// src/code.js
function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 输出: 5

// src/compressor.js
const { minify } = require('terser');
const LZString = require('lz-string');
 
/**
 * 压缩并编码代码为二进制数据
 * @param {string} code - 原始代码
 * @returns {Uint8Array} 编码后的二进制数据
 */
async function compressAndEncode(code) {
  // Step 1: Terser 压缩代码
  const minified = await minify(code, { mangle: true }); // 启用变量混淆
  if (minified.error) throw new Error(`压缩失败: ${minified.error}`);
  const minifiedCode = minified.code;
 
  // Step 2: LZString 压缩（进一步减小体积）
  const compressed = LZString.compressToUint8Array(minifiedCode);
 
  return compressed;
}
 
module.exports = { compressAndEncode };

// src/tree-generator.js
/**
 * 生成圣诞树形状的像素模板
 * @param {number} height - 圣诞树高度（像素）
 * @returns {Array<Array<boolean>>} 二维数组，true 表示有效像素（需填充数据）
 */
function generateTreeTemplate(height) {
  const template = [];
  const width = 2 * height - 1; // 树的宽度（底层最宽）
 
  for (let y = 0; y < height; y++) {
    const row = [];
    const currentWidth = 2 * y + 1; // 第 y 行的宽度（从 1 开始递增 2）
    const startX = Math.floor((width - currentWidth) / 2); // 行起始 x 坐标
 
    for (let x = 0; x < width; x++) {
      // 仅在 [startX, startX + currentWidth) 范围内标记为有效像素
      row.push(x >= startX && x < startX + currentWidth);
    }
    template.push(row);
  }
 
  return template;
}
 
module.exports = { generateTreeTemplate };

// src/main.js
const { createCanvas } = require('canvas');
const fs = require('fs');
const path = require('path');
const { compressAndEncode } = require('./compressor');
const { generateTreeTemplate } = require('./tree-generator');
 
async function main() {
  // 1. 读取原始代码
  const code = fs.readFileSync(path.join(__dirname, 'code.js'), 'utf-8');
 
  // 2. 压缩并编码代码
  const encodedData = await compressAndEncode(code);
  console.log('编码后数据长度:', encodedData.length);
 
  // 3. 生成圣诞树模板（高度 50 像素，宽度 99 像素）
  const treeHeight = 50;
  const treeTemplate = generateTreeTemplate(treeHeight);
  const treeWidth = treeTemplate[0].length; // 宽度 = 2*height - 1 = 99
 
  // 4. 创建画布，背景设为绿色（无效像素）
  const canvas = createCanvas(treeWidth, treeHeight);
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#008000'; // 绿色背景
  ctx.fillRect(0, 0, treeWidth, treeHeight);
 
  // 5. 将编码数据映射到有效像素（红色通道存储数据，绿色/蓝色固定为 0）
  let dataIndex = 0; // 编码数据的当前索引
  for (let y = 0; y < treeHeight; y++) {
    for (let x = 0; x < treeWidth; x++) {
      if (treeTemplate[y][x]) { // 仅处理有效像素
        const pixelValue = dataIndex < encodedData.length 
          ? encodedData[dataIndex] 
          : 0; // 数据不足时填充 0
 
        // 设置像素：红色通道存储数据，绿色/蓝色为 0（呈现红色）
        ctx.fillStyle = `rgb(${pixelValue}, 0, 0)`;
        ctx.fillRect(x, y, 1, 1); // 绘制 1x1 像素
 
        dataIndex++;
      }
    }
  }
 
  // 6. 保存图像到 output 目录
  const outputDir = path.join(__dirname, '../output');
  if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);
  const outputPath = path.join(outputDir, 'christmas-tree.png');
  const buffer = canvas.toBuffer('image/png');
  fs.writeFileSync(outputPath, buffer);
  console.log(`图像已保存至: ${outputPath}`);
}
 
main().catch(console.error);

node src/main.js

function add(a, b) { return a + b; } console.log(add(2, 3));

// 解码逻辑（简化版）
const { createCanvas, loadImage } = require('canvas');
const LZString = require('lz-string');
 
async function decodeImage(imagePath) {
  const img = await loadImage(imagePath);
  const canvas = createCanvas(img.width, img.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, img.width, img.height).data;
 
  // 提取红色通道数据（每 4 个字节为一个像素：R, G, B, A）
  const encodedData = [];
  for (let i = 0; i < imageData.length; i += 4) {
    const r = imageData[i];
    if (r !== 0) encodedData.push(r); // 忽略背景像素（R=0）
  }
 
  // 反转 LZString 压缩和 Terser 解压（此处简化，实际需处理 minify 反转）
  const compressed = new Uint8Array(encodedData);
  const minifiedCode = LZString.decompressFromUint8Array(compressed);
  console.log('解码后的代码:', minifiedCode);
}
 
decodeImage('./output/christmas-tree.png');