js加載pdf截屏生成圖片調用ocr識別成文字

生成pdf代碼：

//pdf
    //定義上傳文件的屬性
    var param = {
        fileName: "",//文件名稱，上傳接口返回
        fileSize: "",//文件大小
        filePage: "",//文件頁數
        printnum: "1",//章的編號  多選拼接  例：1,2
        pointx: "",//X軸坐標  多選拼接  例：1268,1368
        pointy: "",//Y軸坐標  多選拼接  例：590,490
        isRidingSeam: 'N',
        printNums: '1'
    };

    //顯示pdf
    $("#pdf").change(function () {
        $('#pdfDiv').show();
        //關閉左側pdf彈窗
        $('.closePDF').click(function () {
            $('#pdfDiv').hide();
        });
        var pdfFileURL = $("#pdf").val();

        if (pdfFileURL) {
            var formData = new FormData();
            var file = document.getElementById("pdf").files[0];
            formData.append("Files", file);

            $("#imgDiv").empty();//清空上一PDF文件展示圖
            var files = $("#pdf").prop('files');//獲取到文件
            var fileSize = files[0].size;
            var mb;
            if (fileSize) {
                mb = fileSize / 1048576;
                if (mb > 10) {
                    $.WeMsg("文件大小不能>10M", "ERROR");
                    return;
                }
            }

            $("#pdfName").text(files[0].name).attr("title", files[0].name); //名稱
            if (mb !== "") {
                mb = parseInt(mb);
                $("#sizeText").text(mb.toFixed(2) + "Mb");  //大小
            }


            //給后端文件附具體的值
            param.fileName = files[0].name;
            param.fileSize = fileSize;

            /*pdf.js無法直接打開本地文件,所以利用FileReader轉換*/
            var reader = new FileReader();
            reader.readAsArrayBuffer(files[0]);
            reader.onload = function (e) {
                var myData = new Uint8Array(e.target.result);
                var docInitParams = {
                    data: myData
                };
                var typedarray = new Uint8Array(this.result);
                PDFJS.getDocument(typedarray).then(function (pdf) {//PDF轉換為canvas
                    $("#imgDiv").css("border", "0"); //清除文本、邊框
                    if (pdf) {
                        var pageNum = pdf.numPages;
                        if (pageNum >= 2)
                            $('.isRiding').show();
                        else
                            $('.isRiding').hide();
                        param.filePage = pageNum;
                        $("#pagesText").text(pageNum);
                        for (var i = 1; i <= pageNum; i++) {
                            var canvas = document.createElement('canvas');
                            canvas.style.width = '1000px';
                            canvas.style.borderRadius = '10px';
                            canvas.style.border = '1px solid #CA7C4E';
                            canvas.style.margin = '10px';
                            canvas.id = "pageNum" + i;
                            $("#imgDiv").append(canvas);
                            var context = canvas.getContext('2d');
                            openPage(pdf, i, context);
                        }
                    }
                });
                $("#imgDiv").show();
            };
        }
    });

　在$(function(){})中截圖代碼：

//截圖代碼
    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

    // 更新canvas寬高
    $("#bg_canvas").attr("width", clientWidth * 0.4);
    $("#bg_canvas").attr("height", clientHeight);
    $("#bg_canvas").hide();

screenshotClick("frmAdd", "imgDiv");
screenshotClick("frm", "dlgimgDiv");

　　給小按鈕賦值：

function screenshotClick(node, obj) {
    //去掉默認的contextmenu事件，否則會和右鍵事件同時出現。
    $(`#${node} input`).bind("contextmenu", function (e) {
        if ($(this).attr("type") === "text" || $(this).attr("type") === "number") {
            return false;
        }
    });
    $(`#${node} input`).off("mousedown").on("mousedown", function (e) {
        if (e.button === 2) {
            if ($(`#${obj}`).children().length !== 0) {
                if ($(this).attr("type") === "text" || $(this).attr("type") === "number") {
                    $("#itemMenu").show();
                    $("#itemMenu").css("left", e.pageX + 10 + "px");
                    $("#itemMenu").css("top", e.pageY + 10 + "px");
                    $.node = this;
                }
            }
        }
    });
    $(`#${node} textarea`).bind("contextmenu", function (e) {
        return false;
    });
    $(`#${node} textarea`).off("mousedown").on("mousedown", function (e) {
        if (e.button === 2) {
            if ($(`#${obj}`).children().length !== 0) {
                $("#itemMenu").show();
                $("#itemMenu").css("left", e.pageX + 10 + "px");
                $("#itemMenu").css("top", e.pageY + 10 + "px");
                $.node = this;
            }
        }
    });
    $("body").off("click").on("click", function () {
        $("#itemMenu").hide();
    });
}
function screenshot() {
    $("#itemMenu").hide();
    $("#bg_canvas").show();
    //調用選取截屏
    clipScreenshots("bg_canvas");
}

　　調用截屏：

function screenshot() {
    $("#itemMenu").hide();
    $("#bg_canvas").show();
    //調用選取截屏
    clipScreenshots("bg_canvas");
}

　顯示的時候加載pdf：

　

function evalFile(obj) {
    var rowData = $(`#${$(obj).parents('table').attr("id")}`).DataTable().row($(obj).parents('tr')[0]).data();
    //去后台獲取pdf的文件路徑,根據文件名，類型，文件編號

    var rawLength = "";
    $("#dlgimgDiv").empty();
    $.ajax({
        type: "post",
        url: "/Engineering/GetFilePathByFile",
        data: {
            "fileName": rowData.Wegkoix,
            'fileType': rowData.WegkoiZfxn
        },
        success: function (data) {
            //顯示pdf
            var pdfData = data;
            pdfData = location.origin + "/" + pdfData.slice(1);
            PDFJS.getDocument(pdfData).then(function (pdf) {//PDF轉換為canvas
                $("#dlgimgDiv").css("border", "0"); //清除文本、邊框
                if (pdf) {
                    var pageNum = pdf.numPages;
                    if (pageNum >= 2)
                        $('.isRiding').show();
                    else
                        $('.isRiding').hide();
                    $("#pagesText").text(pageNum);
                    for (var i = 1; i <= pageNum; i++) {
                        var canvas = document.createElement('canvas');
                        canvas.style.width = '1000px';
                        canvas.style.borderRadius = '10px';
                        canvas.style.border = '1px solid #CA7C4E';
                        canvas.style.margin = '10px';
                        canvas.id = "pageNum" + i;
                        $("#dlgimgDiv").append(canvas);
                        var context = canvas.getContext('2d');
                        openPage(pdf, i, context);
                    }
                }
            });
        }
    });
}

　　加載 一頁的pdf

function openPage(pdfFile, pageNumber, context) {
    var scale = 2;
    pdfFile.getPage(pageNumber).then(function (page) {
        viewport = page.getViewport(scale);
        var canvas = context.canvas;
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
    return;
}

　截屏的代碼：

//默認畫筆線寬
var defaultStrokeWidth = 1;//畫矩形選取框的線寬
//選取划線的canvasExt
var canvasExt = {
    //畫矩形  畫筆顏色  線寬
    drawRect: function (canvasId, penColor, strokeWidth) {
        var that = this;

        that.penColor = penColor;
        that.penWidth = strokeWidth;
        var canvas = document.getElementById(canvasId);
       
        //canvas 的矩形框
        var canvasRect = canvas.getBoundingClientRect();

        //canvas 矩形框的左上角坐標
        var canvasLeft = canvasRect.left;
        var canvasTop = canvasRect.top;

        // 要畫的矩形的起點 xy
        var x = 0;
        var y = 0;

        //鼠標點擊按下事件，畫圖准備
        canvas.onmousedown = function (e) {
            //設置畫筆顏色和寬度
            var color = that.penColor;
            var penWidth = that.penWidth;
            // 確定起點
            x = e.clientX - canvasLeft;
            y = e.clientY - canvasTop;
            // 添加layer
            $("#" + canvasId).addLayer({
                type: 'rectangle',
                strokeStyle: color,
                strokeWidth: penWidth,
                name: 'areaLayer',
                fromCenter: false,
                x: x, y: y,
                width: 1,
                height: 1
            });

            // 繪制
            $("#" + canvasId).drawLayers();
            $("#" + canvasId).saveCanvas();

            //鼠標移動事件，畫圖
            canvas.onmousemove = function (e) {
                // 要畫的矩形的寬高
                var width = e.clientX - canvasLeft - x;
                var height = e.clientY - canvasTop - y;

                // 清除之前畫的
                $("#" + canvasId).removeLayer('areaLayer');

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

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

        //鼠標抬起
        canvas.onmouseup = function (e) {
            var color = that.penColor;
            var penWidth = that.penWidth;

            canvas.onmousemove = null;

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

            $("#" + canvasId).removeLayer('areaLayer');

            $("#" + canvasId).addLayer({
                type: 'rectangle',
                strokeStyle: color,
                strokeWidth: penWidth,
                name: 'areaLayer',
                fromCenter: false,
                x: x, y: y,
                width: width,
                height: height
            });
            $("#" + canvasId).drawLayers();
            $("#" + canvasId).saveCanvas();

            // 把body轉成canvas
            html2canvas(document.body, {
                scale: 1,
                // allowTaint: true,
                useCORS: true  //跨域使用
            }).then(canvas => {
                var capture_x, capture_y;
                if (width > 0) {
                    //從左往右畫
                    capture_x = x + that.penWidth;
                } else {
                    //從右往左畫
                    capture_x = x + width + that.penWidth;
                }
                if (height > 0) {
                    //從上往下畫
                    capture_y = y + that.penWidth;
                } else {
                    //從下往上畫
                    capture_y = y + height + that.penWidth;
                }
                printClip(canvas, capture_x, capture_y, Math.abs(width), Math.abs(height));
            });
            // 移除畫的選取框
            $("#" + canvasId).removeLayer('areaLayer');
            // 隱藏用於華畫取框的canvas
            $("#" + canvasId).hide();
        };
    }
};


//老石 ：選取截屏
function clipScreenshots(canvasId) {
    canvasExt.drawRect(canvasId, "red", defaultStrokeWidth);
}

//打印截取區域  截取  截取的起點x  截取的起點y  截取的起點寬  截取的起點高
function printClip(canvas, capture_x, capture_y, capture_width, capture_height) {

    // 創建一個用於截取的canvas
    var clipCanvas = document.createElement('canvas');
    clipCanvas.width = capture_width;
    clipCanvas.height = capture_height;
    // 截取
    clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height)
    var clipImgBase64 = clipCanvas.toDataURL();

    // 生成圖片
    var clipImg = new Image();
    clipImg.src = clipImgBase64;
    //var con = confirm('識別圖片文字嗎?取消則保存截圖');
    //if (con) {
        //調用后台ocr
        $.post("/Engineering/CallOcrReturnStr", { urlImage: clipImg.src }, function (res) {
            if (res !== "") {
                //把結果添加到文本框
                var data = JSON.parse(res);
                var val = "";
                if ($.node.tagName === "INPUT") {
                    data.forEach(item => {
                        val += item.words;
                    });
                } else {
                    val=data.map(item=> {
                        return item.words;
                    }).join("\n")
                }
                $($.node).val(val);
            }
            else {
                $.WeMsgBox("ocr轉換失敗");
            }
        });
        //調用打印功能
        //$(clipImg).print();
    //} else {
    //    downloadIamge(clipImgBase64);
    //}
}

//下載保存圖片
function downloadIamge(imgUrl) {
    // 圖片保存有很多方式，這里使用了一種投機的簡單方法。
    // 生成一個a元素
    var a = document.createElement('a');
    // 創建一個單擊事件
    var event = new MouseEvent('click');
    // 生成文件名稱
    var timestamp = new Date().getTime();
    var name = imgUrl.substring(22, 30) + timestamp + '.png';
    a.download = name;
    // 將生成的URL設置為a.href屬性
    a.href = imgUrl;
    // 觸發a的單擊事件 開始下載
    a.dispatchEvent(event);
}

　　后端代碼：

[HttpPost]
        public string CallOcrReturnStr(string urlImage)
        {
            if (string.IsNullOrEmpty(urlImage)) return "";
            //這個地方需要考慮隊列
            string fileName = "";
            if (urlImage.StartsWith("data:image"))
                fileName = mWeApi.Base64StringToImage(urlImage);
            else if (urlImage.StartsWith("http:") || urlImage.StartsWith("https:")) //要把圖片保存到本地
            {

            }
            string json = mWeApi.OcrImgConvertToText(fileName);
            return json;
        }

　　

[HttpPost]
        public string GetFilePathByFile(string fileName, string fileType)
        {
            if (string.IsNullOrEmpty(fileName) || string.IsNullOrEmpty(fileType))
                return "";
            string path = "~/Files/TechDoc/" + fileType + "/" + fileName.TrimEnd();
            if (System.IO.File.Exists(Server.MapPath(path)))
                return path;
            return "文件名不存在";
        }

　　

 public string SaveFileDoc()
        {
            if (Request.Files.Count == 0) return "上傳失敗,請選擇文件";
            List<string> listFile = new List<string>();
            string path = "~/Files/TechDoc/";
            if (!Directory.Exists(Server.MapPath(path)))
                Directory.CreateDirectory(Server.MapPath(path));
            try
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    var file = Request.Files[i];
                    string fileName = Request.Files[i].FileName;
                    if (string.IsNullOrEmpty(fileName))
                        return "文件名為空";
                    fileName = fileName.Substring(fileName.LastIndexOf('\\') + 1);
                    file.SaveAs(Server.MapPath(path + fileName));
                }
                if (path.StartsWith("~"))
                    path = path.Substring(1, path.Length - 1);
                return "OK" + path;
            }
            catch (Exception ex)
            {
                return "上傳失敗";
            }
        }

　　

//base64轉圖片
        public string Base64StringToImage(string base64)
        {
            if (string.IsNullOrEmpty(base64)) return "";
            //base64 = RemoveByRegex(base64, ".*base64,");  //速度慢
            base64 = base64.Replace("data:image/png;base64,", "");

            string fileName = "";
            try
            {
                byte[] bytes = Convert.FromBase64String(base64);
                if (bytes == null) return null;
                MemoryStream ms = new MemoryStream(bytes);
                Bitmap bitmap = new Bitmap(ms);
                //保存圖片，獲取url地址
                Random rd = new Random();
                fileName = DateTime.Now.ToString("yyyyMMddhhmmssfff") + rd.Next(10000, 99999) + ".png";
                string path = "~/OcrFile/";
                if (!Directory.Exists(System.Web.HttpContext.Current.Server.MapPath(path)))
                    Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(path));
                string imgUrl = path + fileName;
                if (File.Exists(imgUrl))
                    File.Delete(imgUrl);
                else
                    bitmap.Save(System.Web.HttpContext.Current.Server.MapPath(imgUrl), ImageFormat.Png);

                ms.Close();//關閉當前流，並釋放所有與之關聯的資源
                bitmap.Dispose();
            }
            catch (Exception ex)
            {
                LogWriter.Write(LOG_CATEGORY.WIN_UI, LOG_LEVEL.ERROR, "Base64StringToImage:" + ex.ToString());
                return null;
            }
            return fileName;
        }

　　

 private static object obj = new object();
        public string OcrImgConvertToText(string fileName)
        {
            if (string.IsNullOrEmpty(fileName)) return "";
            var client = new Baidu.Aip.Ocr.Ocr(OCR_API_KEY, OCR_API_SECRET_KEY);
            client.Timeout = 60000;
            string imgUrl = System.Web.HttpContext.Current.Server.MapPath("~/OcrFile/" + fileName);
            if (!File.Exists(imgUrl)) return "";
            try
            {
                lock (obj) //確保只處理一張圖片
                {
                    byte[] image = File.ReadAllBytes(imgUrl);
                    JObject result = client.GeneralBasic(image);
                    //過濾掉無用字符
                    JObject jo = (JObject)JsonConvert.DeserializeObject(result.ToString());
                    string text = jo["words_result"].ToString();
                    return text;
                }
            }
            catch (Exception ex)
            {
                LogWriter.Write(LOG_CATEGORY.WIN_UI, LOG_LEVEL.ERROR, "OcrImgConvertToText:" + ex.ToString());
                return null;
            }
        }

　　html代碼：

 <div id="itemMenu" style="display:none;position:fixed;z-index: 10000;">
        <table border="1" cellspacing="0">
            <tr>
                <td style="cursor:default;padding:5px 10px;border:1px solid #ccc;background:#fff;" align="center" onclick="screenshot()">智能識別</td>
            </tr>
        </table>
    </div>

　　

 <div id="pdfs">
                    <div id="pdfDiv">
                        <div id="imgDiv"  style="margin: 0 auto;width: 595px;min-height: 842px;border: 1px solid #CA7C4E;border-radius: 10px;text-align: center;">

                        </div>
                    </div>
                </div>

　　

  <a href="javascript:;" class="btn file">
                                選擇PDF
                                <input id='pdf' data-field="Wegkoix" type='file' name='file' accept="application/pdf">
                            </a>

　　引入的js：

    @*顯示pdf需要的js*@
    <script src="~/Content/pdfHelper/js/pdf.js"></script>
    <script src="~/Content/pdfHelper/js/FileSaver.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>

    @*截屏用到的js*@
    <script src="~/Content/CommJs/html2canvas.js"></script>
    <script src="~/Content/CommJs/jQuery.print.js"></script>
    <script src="~/Content/CommJs/jcanvas.min.js"></script>

　　效果：