当前位置：首页 > JavaScript

js实现手写

2026-03-14 14:44:03JavaScript

手写识别实现方法

使用JavaScript实现手写识别通常需要结合HTML5的Canvas元素和机器学习库（如TensorFlow.js）。以下是核心实现步骤：

绘制手写输入区域

创建一个Canvas元素用于手写输入，并绑定鼠标或触摸事件：

<canvas id="drawingCanvas" width="300" height="300"></canvas>

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    draw(e);
}

function draw(e) {
    if (!isDrawing) return;
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000';
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
}

function stopDrawing() {
    isDrawing = false;
    ctx.beginPath();
}

预处理图像数据

将Canvas绘图转换为模型可接受的输入格式：

function preprocessImage() {
    // 调整大小并转换为灰度
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = 28;
    tempCanvas.height = 28;

    tempCtx.drawImage(canvas, 0, 0, 28, 28);
    const imageData = tempCtx.getImageData(0, 0, 28, 28);

    // 转换为浮点数组并归一化
    const pixels = [];
    for (let i = 0; i < imageData.data.length; i += 4) {
        const gray = (imageData.data[i] * 0.3 + imageData.data[i+1] * 0.59 + imageData.data[i+2] * 0.11) / 255;
        pixels.push(gray);
    }
    return pixels;
}

加载预训练模型

使用TensorFlow.js加载MNIST手写数字识别模型：

async function loadModel() {
    const model = await tf.loadLayersModel('model.json');
    return model;
}

// 预测函数
async function predict() {
    const model = await loadModel();
    const pixels = preprocessImage();
    const tensor = tf.tensor2d(pixels, [1, 784]);
    const prediction = model.predict(tensor);
    const results = await prediction.data();
    return results;
}

实现实时预测

将预测结果显示在页面上：

const predictButton = document.getElementById('predictBtn');
predictButton.addEventListener('click', async () => {
    const results = await predict();
    const maxIndex = results.indexOf(Math.max(...results));
    document.getElementById('result').innerText = `预测数字: ${maxIndex}`;
});

清除画布功能

添加重置按钮清除绘图：

js实现手写

document.getElementById('clearBtn').addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById('result').innerText = '';
});