上传图片canvas获取点读内容 实现图片点读效果

最近做了一个英语点读的功能，具体是点图片某块位置会获取对应的语音信息进行点读效果，找了两种解决办法
1百度ai识别图片代码如下,不过这种办法实现的效果并不好，会把页面所有文字内容识别出来，没办法区分哪些需要那些不需要，合并座标信息也用了很多办法，始终没有弄好精准合并，所以办法被舍弃了

 $client = new \AipOcr(xxxx, 'xxxxx', 'xxxxx');
        $image = file_get_contents('20190901200756-0015.jpg');
        list($width, $height, $type, $attr) = getimagesize("20190901200756-0015.jpg");
        $options = array();
        $options["recognize_granularity"] = "big";
        $options["language_type"] = "CHN_ENG";
        $options["detect_direction"] = "true";
        $options["detect_language"] = "true";
        $options["vertexes_location"] = "true";
        $options["probability"] = "true";
        $contents = $client->general($image, $options)['words_result'];
        $res = [];

        foreach ($contents as $key => $content) {
            $res[] = [
                'section_content_id' => '1',
                'file_name' => '20190901200756-0015.jpg',
                'location' => join(',', $content['location']),
                'content' => $content['words'],
                'type' => 0,
                'orderno' => $key,
                'file_path' => '20190901200756-0015.jpg',
                'file_with' => $width,
                'file_height' => $height,
            ];
        }
        Content::insert($res);

2jcanvas(https://download.csdn.net/download/qq_29099209/1182914)+Jcrop（https://download.csdn.net/download/qq_29099209/11855619）自己上传文件圈定范围，截取内容使用百度AI分析识别文字，采用了这个办法，但是需要人力出来圈定范围，效果如下

var t = 0;
var tag = false;
//获取滚动距离
$(window).scroll(function () {
    ScollPostion();
});

//滚动条位置
function ScollPostion() {

    if (document.documentElement && document.documentElement.scrollTop) {
        t = document.documentElement.scrollTop;
    } else if (document.body) {
        t = document.body.scrollTop;
    }
    return {
        top: t,
    };
}

var img = document.getElementById("bg");
var ct = document.getElementById("myCan");
var ctx = ct.getContext("2d");


var fillImage = function (obj) {
    var file = $('#ima')[0].files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var tag = true;
        img = document.getElementById("bg");
        $('#bg').attr('src', this.result);
    };
};
var layer = -1;


CanvasExt = {
    drawRect: function (canvasId, penColor, strokeWidth) {
        var that = this;
        that.penColor = penColor;
        that.penWidth = strokeWidth;
        console.log(3333333333);
        var canvas = document.getElementById(canvasId);
        //canvas 的矩形框
        var canvasRect = canvas.getBoundingClientRect();
        //矩形框的左上角座标
        var canvasLeft = canvasRect.left;
        var canvasTop = canvasRect.top;

        var layerIndex = layer;
        var layerName = "layer";
        var x = 0;
        var y = 0;
        var width = 0;
        var height = 0;
        var current = [];
        var location_array = [];
        //鼠标点击按下事件，画图准备

        canvas.onmousedown = function (e) {
            //设置画笔颜色和宽度
            var color = that.penColor;
            var penWidth = that.penWidth;
            console.log(44444444444);
            layerIndex++;
            layer++;

            layerName += layerIndex;
            x = e.clientX - canvasLeft;
            y = e.clientY - canvasTop + t;
            current['0'] = x;
            current['1'] = y;
            $("#" + canvasId).addLayer({
                type: 'rectangle',
                strokeStyle: color,
                text: 'jCanvas is fun',
                strokeWidth: penWidth,
                name: layerName,
                fromCenter: false,
                x: x, y: y,
                width: 1,
                height: 1
            });

            $("#" + canvasId).drawLayers();
            $("#" + canvasId).saveCanvas();
            //鼠标移动事件，画图
            canvas.onmousemove = function (e) {
                width = e.clientX - canvasLeft - x;
                height = e.clientY - canvasTop - y + t;

                $("#" + canvasId).removeLayer(layerName);

                $("#" + canvasId).addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    text: 'jCanvas is fun',
                    strokeWidth: penWidth,
                    name: layerName,
                    fromCenter: false,
                    x: x, y: y,
                    width: width,
                    height: height
                });

                $("#" + canvasId).drawLayers();
            }
        };

        canvas.onmouseup = function (e) {
            console.log(5555);
            var color = that.penColor;
            var penWidth = that.penWidth;

            canvas.onmousemove = null;

            width = e.clientX - canvasLeft - x;
            height = e.clientY - canvasTop - y + t;

            $("#" + canvasId).removeLayer(layerName);

            $("#" + canvasId).addLayer({
                type: 'rectangle',
                strokeStyle: color,
                strokeWidth: penWidth,
                name: layerName,
                fromCenter: false,
                x: x, y: y,
                width: width,
                height: height
            });
            current['2'] = width;
            current['3'] = height;
            if (width > 20 && height > 20) {
                var string = [];
                string[0] = current[0] * 4;
                string[1] = current[1] * 4;
                string[2] = current[2] * 4;
                string[3] = current[3] * 4;
                string = string.join(',')
            }
            $("#myCan").attr('width', current[2]);
            $("#myCan").attr('height', current[3]);
            //清空画板
            ctx.clearRect(0, 0, ct.width, ct.height);
            //.drawImage(图像对象,原图像截取的起始X座标,原图像截取的起始Y座标,原图像截取的宽度,原图像截取的高度，绘制图像的起始X座标,绘制图像的起始Y座标,绘制图像所需要的宽度,绘制图像所需要的高度);
            //矩形框[150,150,200,200]--原图像截取的起始X座标,原图像截取的起始Y座标,原图像截取的宽度,原图像截取的高度
            ctx.drawImage(img, current[0] * 4, current[1] * 4, current[2] * 4, current[3] * 4, 0, 0, ct.width, ct.height);
            translate(string);
            $("#" + canvasId).drawLayers();
            $("#" + canvasId).saveCanvas();
        }
    }
};


function drawPen() {
    var color = "red";
    var width = 1;
    CanvasExt.drawRect("canvas", color, width);
}

$(function () {
    drawPen();
});

var book = [];

function getSection() {
    var unit = $('#unit').val();
    var section = ' <option value="">节选择</option>';
    for (var i in book) {
        if (unit == book[i]['id']) {
            for (var j in book[i]['content'])
                section += '<option value="' + book[i]['content'][j]['id'] + '">' + book[i]['content'][j]['name'] + ':' + book[i]['content'][j]['desc'] + '</option>'
        }
    }
    $('#section').html(section);
}

//获取章
function getUnitOrLesson(type) {
    if (type == 1) {
        var url = '/book/getUnit';
        var data = {'id': $('#book_id').val()};

    } else {
        var url = '/book/getSection';
        var data = {'section_content_id': $('#section').val()};
    }
    requestDataAjax(url, data, function (res) {
        if (type == 1) {
            book = res['data']['section'];
            var unit = ' <option value="">章选择</option>';
            for (var i in res['data']['section']) {
                unit += '<option value="' + res['data']['section'][i]['id'] + '">' + res['data']['section'][i]['name'] + '</option>'
            }
            $('#unit').html(unit);
        } else {
            var content = ' <option value="">图片选择</option>';
            for (var i in res['data']['section']) {
                unit += '<option value="' + res['data']['section'][i]['id'] + '">' + res['data']['section'][i]['name'] + '</option>'
            }
            $('#unit').html(unit);
        }
    }, function (error) {
        alert('操作失败');
    });
};

//翻译选中区域
function translate(string) {
    var type = 2;
    var data = ct.toDataURL("image/jpeg", 0.8);

    var base64 = data.replace(/^(data:\s*image\/(\w+);base64,)/, "");
    // 上传文件
    requestDataAjax('/fileImport/add', {'file': base64, 'type': type}, function (res) {
        //绘制点
        $('#location').after(' <div class="col-md-12">' +
            ' <div class="input-group margin">' +
            '<input type="text" class="form-control col-md-6" name="content[]" value="' + string + '">' +
            '<input class="form-control col-md-6" value="' + res.data + '" type="text">' +
            '<span class="input-group-btn">' +
            '<button type="button" class="btn btn-danger btn-flat">删除!</button>' +
            '</span>' +
            '</div></div>');
    }, function (e) {
        alert('翻译失败！');
    });
}

$('#submit_button').click(function () {
    var file = $('#ima')[0].files[0];
    var data = $('.updateLocation').serializeArray();
    var post_data = '';
    var j = 0;
    for (var i in data) {
        if (data[i]['name'] == 'book_id') {
            post_data += 'book_id=' + data[i]['value'] + '&';
        } else if (data[i]['name'] == 'section') {
            post_data += 'section=' + data[i]['value'] + '&';
        } else if (data[i]['name'] == 'unit') {
            post_data += 'unit=' + data[i]['value'] + '&';
        } else {
            post_data += 'content' + j + '=' + data[i]['value'] + '&';
            j++;
        }
    }
    // 构建form数据
    var formData = new FormData();
    formData.append('file', file);
    formData.append('data', post_data);
    // 上传文件
    requestDataViaAjax('/book/updateContent', formData, function (res) {
        alert('上传成功！');
    }, function (e) {
        alert('上传失败！');
    });
});