二值化点阵图导入/导出 Demo，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

            
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Binary Image Import & Export</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { margin: 20px; }
        textarea { width: 100%; height: 100px; }
        button { margin-top: 10px; }
    </style>
</head>
<body>
<div class="container">
    <h1>二值化点阵图导入/导出 Demo</h1>
    <canvas id="myCanvas" width="300" height="100" style="border:0px;"></canvas><br/>
    
    <!-- 导入功能 -->
    <h3>导入二值化数据:</h3>
    <textarea id="importTextarea" placeholder='粘贴您的二值化矩阵数据，格式如：[[0,1,0],[1,1,1],[0,1,0]]'></textarea><br/>
    <button onclick="loadFromJSON()">加载数据到画布</button>

    <!-- 导出功能 -->
    <h3>导出二值化数据:</h3>
    <button onclick="exportToJSON()">导出二值化数据</button>
</div>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const importTextarea = document.getElementById('importTextarea');

    // 初始化画布，绘制一个示例图案
    function initCanvas() {
        // 设置背景色
        ctx.fillStyle = "#FFFFFF"; 
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制示例文字
        ctx.font = "40px Arial";
        ctx.fillStyle = '#000000';
        ctx.fillText('啊啊Hello World', 0, 50);
    }

    // 将当前画布转换为二值化矩阵并导出
    function exportToJSON() {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        const binaryMatrix = [];

        for (let y = 0; y < canvas.height; y++) {
            binaryMatrix[y] = [];
            for (let x = 0; x < canvas.width; x++) {
                const index = (y * canvas.width + x) * 4;
                // 使用加权平均法计算灰度值，更精确
                const r = data[index];
                const g = data[index + 1];
                const b = data[index + 2];
                
                // 进行二值化判断
                binaryMatrix[y][x] = r == 255 ? 0 : 1;
            }
        }

        // 将二值化矩阵转换为JSON字符串并复制到剪贴板
        // const jsonStr = JSON.stringify(binaryMatrix);
        
        // // 创建一个临时textarea用于复制
        // const tempTextArea = document.createElement('textarea');
        // tempTextArea.value = jsonStr;
        // document.body.appendChild(tempTextArea);
        // tempTextArea.select();
        // document.execCommand('copy');
        // document.body.removeChild(tempTextArea);

        // alert("二值化数据已生成并复制到剪贴板！\n\n数据大小: " + binaryMatrix.length + "x" + binaryMatrix[0].length + "\n\n请检查控制台查看完整数据。");
        console.log(binaryMatrix);
    }

    // 从JSON字符串加载二值化矩阵并绘制到画布
    function loadFromJSON() {
        let inputText = importTextarea.value.trim();
        if (!inputText) {
            alert("请输入要加载的二值化数据！");
            return;
        }

        try {
            // 解析输入的JSON字符串
            const matrix = JSON.parse(inputText);
            
            if (!Array.isArray(matrix) || !Array.isArray(matrix[0])) {
                throw new Error("数据格式错误：不是有效的二维数组。");
            }

            const height = matrix.length;
            const width = height > 0 ? matrix[0].length : 0;

            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 设置默认背景色为白色
            ctx.fillStyle = "#FFFFFF";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 检查画布是否需要调整大小以适应新数据
            if (width !== canvas.width || height !== canvas.height) {
                if (confirm(`数据尺寸 (${width}x${height}) 与当前画布 (${canvas.width}x${canvas.height}) 不同。是否调整画布大小？`)) {
                    canvas.width = width;
                    canvas.height = height;
                } else {
                    // 如果不调整，只绘制能容纳的部分
                    console.warn("画布尺寸未改变，仅绘制可容纳部分。");
                }
            }

            // 绘制矩阵
            for (let y = 0; y < height; y++) {
                for (let x = 0; x < matrix[y].length; x++) {
                    if (matrix[y][x]) { // 如果值为1，则绘制前景色（黑色）
                        ctx.fillStyle = '#000000';
                        ctx.fillRect(x, y, 1, 1);
                    } 
                    // 如果值为0，则保持背景色（白色），无需额外操作
                }
            }
            // alert("数据加载成功！");
        } catch (e) {
            alert("加载失败，请检查数据格式是否正确。\n\n错误信息：" + e.message);
            console.error(e);
        }
    }

    // 页面加载完成后初始化画布
    window.onload = initCanvas;
</script>
</body>
</html>