本地图片经Canvas灰度缩放后如何提交到ocr.space实现OCR识别

第一步：修改前端JS逻辑 #

你需要在原有canvas绘制逻辑后补充2部分功能：灰度处理、canvas转文件上传。修改后的完整JS代码如下：

var imageLoader = document.getElementById('imageLoader');
var uploadBtn = document.getElementById('uploadBtn');
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var processedBlob = null; // 存储处理后的图片blob

imageLoader.addEventListener('change', handleImage, false);
uploadBtn.addEventListener('click', uploadProcessedImage, false);

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = 800;
            canvas.height = 600;
            // 先绘制缩放后的图片
            ctx.drawImage(img, 0, 0, 800, 600);
            // 灰度处理逻辑
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            for (let i = 0; i < data.length; i += 4) {
                const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
                data[i] = gray; // R
                data[i + 1] = gray; // G
                data[i + 2] = gray; // B
            }
            ctx.putImageData(imageData, 0, 0);
            // 转成Blob存储，第二个参数是图片格式，第三个是质量0-1
            canvas.toBlob(function(blob) {
                processedBlob = blob;
            }, 'image/jpeg', 0.85);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

// 上传处理后的图片函数
function uploadProcessedImage() {
    if (!processedBlob) {
        alert('请先选择图片并等待处理完成');
        return;
    }
    // 构造FormData，对应后端接收的字段名attachment
    const formData = new FormData();
    formData.append('attachment', processedBlob, 'processed.jpg');
    formData.append('submit', '1'); // 对应后端isset($_POST['submit'])的判断
    
    // 发送请求到你的PHP后端
    fetch('替换为你的PHP后端接口地址', {
        method: 'POST',
        body: formData
    }).then(res => res.text())
    .then(result => {
        // 后端返回的是OCR结果页面，直接写入当前页面即可
        document.write(result);
    }).catch(err => {
        console.error('上传失败', err);
    })
}

第二步：修改前端HTML代码 #

新增上传按钮，修改后完整HTML如下：

<html>
    <head>
        <title>上传图片做OCR识别</title>
    </head>
    <body>
        <label>Image File:</label><br/>
        <input type="file" id="imageLoader" name="imageLoader"/><br>
        <button type="button" id="uploadBtn">提交识别</button><br>
        <canvas id="imageCanvas" name="imageCanvas"></canvas>
    </body>
</html>

注意事项 #

• 后端代码不需要做任何修改，只要保证前端fetch的地址和你PHP文件的部署地址一致即可
• 可以调整canvas.toBlob里的质量参数，控制生成的图片大小不超过后端限制的990KB
• 灰度处理代码可以根据实际识别效果调整参数，不需要的话直接删掉对应逻辑即可

内容的提问来源于stack exchange，提问作者chrpust