上傳圖片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('上傳失敗！');
    });
});