Question

在下面的代码中，我希望它接受计算机保存的图像，并希望通过相机拍摄照片并运行过程图像。这段代码仅处理URL图像，因此我需要帮助，因此它可以处理其他两种类型的图像输入。需要编辑此代码，以便它可以通过以下方式接受输入并处理图像（计算机上保存的图像和通过相机拍摄的照片）。另外，如果您可以编辑代码以检查并查看其是否为图像。最后，输出窗口应该只包含没有边界框的文本。

  <!DOCTYPE html>
  <html>
    <head>
        <title>OCR Sample</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
    </head>
    <body>

    <script type="text/javascript">
        function processImage() {
            // **********************************************
            // *** Update or verify the following values. ***
            // **********************************************

            // Replace <Subscription Key> with your valid subscription key.
            var subscriptionKey = "<Subscription Key>";

            // You must use the same region in your REST call as you used to get your
            // subscription keys. For example, if you got your subscription keys from
            // westus, replace "westcentralus" in the URI below with "westus".
            //
            // Free trial subscription keys are generated in the westcentralus region.
            // If you use a free trial subscription key, you shouldn't need to change
            // this region.
            var uriBase =
                "https://westcentralus.api.cognitive.microsoft.com/vision/v2.0/ocr";

            // Request parameters.
            var params = {
                "language": "unk",
                "detectOrientation": "true",
            };

            // Display the image.
            var sourceImageUrl = document.getElementById("inputImage").value;
            document.querySelector("#sourceImage").src = sourceImageUrl;

            // Perform the REST API call.
            $.ajax({
                url: uriBase + "?" + $.param(params),

                // Request headers.
                beforeSend: function(jqXHR){
                    jqXHR.setRequestHeader("Content-Type","application/json");
                    jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey);
                },

                type: "POST",

                // Request body.
                data: '{"url": ' + '"' + sourceImageUrl + '"}',
            })

            .done(function(data) {
                // Show formatted JSON on webpage.
                $("#responseTextArea").val(JSON.stringify(data, null, 2));
            })

            .fail(function(jqXHR, textStatus, errorThrown) {
                // Display error message.
                var errorString = (errorThrown === "") ?
                    "Error. " : errorThrown + " (" + jqXHR.status + "): ";
                errorString += (jqXHR.responseText === "") ? "" :
                    (jQuery.parseJSON(jqXHR.responseText).message) ?
                        jQuery.parseJSON(jqXHR.responseText).message :
                        jQuery.parseJSON(jqXHR.responseText).error.message;
                alert(errorString);
            });
        };
    </script>

    <h1>Optical Character Recognition (OCR):</h1>
    Enter the URL to an image of printed text, then
    click the <strong>Read image</strong> button.
    <br><br>
Upload a file: <input type="file" onchange="document.getElementById('inputImage').value = this.value.split('\\').pop().split('/').pop()""/>
<br>
    Image to read:
    <input type="text" name="inputImage" id="inputImage" 
        value="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Atomist_quote_from_Democritus.png/338px-Atomist_quote_from_Democritus.png" />
    <button onclick="processImage()">Read image</button>
    <br><br>
    <div id="wrapper" style="width:1020px; display:table;">
        <div id="jsonOutput" style="width:600px; display:table-cell;">
            Response:
            <br><br>
            <textarea id="responseTextArea" class="UIInput"
                      style="width:580px; height:400px;"></textarea>
        </div>
        <div id="imageDiv" style="width:420px; display:table-cell;">
            Source image:
            <br><br>
            <img id="sourceImage" width="400" />
        </div>
    </div>
    </body>
  </html>

编辑以下代码，使其可以进行图像处理（计算机保存的照片和通过相机拍摄的照片）并纠正输出？

0 个答案: