<!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];
binaryMatrix[y][x] = r == 255 ? 0 : 1;
}
}
console.log(binaryMatrix);
}
function loadFromJSON() {
let inputText = importTextarea.value.trim();
if (!inputText) {
alert("请输入要加载的二值化数据！");
return;
}
try {
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;
// 创建新的ImageData对象
const imageData = ctx.createImageData(width, height);
const data = imageData.data;
// 填充ImageData数据
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const idx = (y * width + x) * 4;
data[idx] = matrix[y][x] ? 0 : 255; // R
data[idx + 1] = matrix[y][x] ? 0 : 255; // G
data[idx + 2] = matrix[y][x] ? 0 : 255; // B
data[idx + 3] = 255; // A
}
}
// 清空并调整画布大小以适应新数据
ctx.clearRect(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("画布尺寸未改变，仅绘制可容纳部分。");
}
}
// 绘制ImageData到画布
ctx.putImageData(imageData, 0, 0);
} catch (e) {
alert("加载失败，请检查数据格式是否正确。\n\n错误信息：" + e.message);
console.error(e);
}
}
window.onload = initCanvas;
</script>
</body>
</html>
index.html
md
README.md
index.html