Computer Vision API JavaScript 자습서Computer Vision API JavaScript tutorial

이 자습서에서는 Microsoft Cognitive Services Computer Vision REST API의 기능을 보여 줍니다.This tutorial shows the features of the Microsoft Cognitive Services Computer Vision REST API.

Computer Vision REST API를 사용하는 JavaScript 응용 프로그램을 탐색하여 OCR(광학 인식)을 수행하고, 스마트하게 잘리는 썸네일을 만들고, 이미지에서 얼굴을 포함한 시각적 기능을 감지, 분류, 태그 지정 및 설명합니다.Explore a JavaScript application that uses the Computer Vision REST API to perform optical character recognition (OCR), create smart-cropped thumbnails, plus detect, categorize, tag, and describe visual features, including faces, in an image. 이 예제에서는 분석 또는 처리할 이미지 URL을 제출할 수 있습니다.This example lets you submit an image URL for analysis or processing. 이 오픈 소스 예제는 JavaScript에서 사용자 고유의 앱을 빌드하여 Computer Vision REST API를 사용하기 위한 템플릿으로 사용할 수 있습니다.You can use this open source example as a template for building your own app in JavaScript to use the Computer Vision REST API.

JavaScript 양식 응용 프로그램은 이미 작성되어 있지만 Computer Vision 기능이 없습니다.The JavaScript form application has already been written, but has no Computer Vision functionality. 이 자습서에서는 Computer Vision REST API 관련 코드를 추가하여 응용 프로그램의 기능을 완성합니다.In this tutorial, you add the code specific to the Computer Vision REST API to complete the application's functionality.

필수 조건Prerequisites

플랫폼 요구 사항Platform requirements

이 자습서는 간단한 텍스트 편집기를 사용하여 개발되었습니다.This tutorial has been developed using a simple text editor.

Computer Vision API 구독 및 구독 키 가져오기Subscribe to Computer Vision API and get a subscription key

예제를 만들기 전에 먼저 Microsoft Cognitive Services의 일부인 Computer Vision API를 구독해야 합니다.Before creating the example, you must subscribe to Computer Vision API which is part of the Microsoft Cognitive Services. 구독 및 키 관리에 대한 자세한 내용은 구독을 참조하세요.For subscription and key management details, see Subscriptions. 기본 및 보조 키는 모두 이 자습서에서 사용할 수 있습니다.Both the primary and secondary keys are valid to use in this tutorial.

자습서 프로젝트 다운로드Download the tutorial project

Cognitive Services JavaScript Computer Vision 자습서를 복제하거나 .zip 파일을 다운로드하여 빈 디렉터리에 추출합니다.Clone the Cognitive Services JavaScript Computer Vision Tutorial, or download the .zip file and extract it to an empty directory.

모든 자습서 코드를 추가하여 완성된 자습서를 사용하려면 Completed 폴더에 있는 파일을 사용하면 됩니다.If you would prefer to use the finished tutorial with all tutorial code added, you can use the files in the Completed folder.

자습서 코드 추가Add the tutorial code

JavaScript 응용 프로그램은 각 기능마다 하나씩 6개의 .html 파일로 설정되어 있습니다.The JavaScript application is set up with six .html files, one for each feature. 각 파일에서는 서로 다른 Computer Vision 함수(분석, OCR 등)를 보여 줍니다.Each file demonstrates a different function of Computer Vision (analyze, OCR, etc). 6개의 자습서 섹션은 서로 종속되지 않으므로 하나의 파일, 6개의 파일 모두 또는 몇 개의 파일에만 자습서 코드를 추가할 수 있습니다.The six tutorial sections do not have interdependencies, so you can add the tutorial code to one file, all six files, or only a couple of files. 그리고 자습서 코드는 임의의 순서로 파일에 추가할 수 있습니다.And you can add the tutorial code to the files in any order.

이제 시작하겠습니다.Let's get started.

이미지 분석Analyze an image

Computer Vision의 [분석] 기능은 2,000개가 넘는 인식 가능한 물체, 생물, 풍경 및 행위에 대한 이미지를 분석합니다.The Analyze feature of Computer Vision analyzes an image for more than 2,000 recognizable objects, living beings, scenery, and actions. 분석이 완료되면 [분석]에서 설명 태그, 색 분석, 캡션 등으로 이미지를 설명하는 JSON 개체를 반환합니다.Once the analysis is complete, Analyze returns a JSON object that describes the image with descriptive tags, color analysis, captions, and more.

자습서 응용 프로그램의 [분석] 기능을 완성하려면 다음 단계를 수행합니다.To complete the Analyze feature of the tutorial application, perform the following steps:

분석 1단계: 양식 단추에 대한 이벤트 처리기 코드 추가Analyze step 1: Add the event handler code for the form button

텍스트 편집기에서 analyze.html 파일을 열고, 파일의 아래쪽에서 analyzeButtonClick 함수를 찾습니다.Open the analyze.html file in a text editor and locate the analyzeButtonClick function near the bottom of the file.

analyzeButtonClick 이벤트 처리기 함수는 양식을 지우고, URL에 지정된 이미지를 표시한 다음, AnalyzeImage 함수를 호출하여 이미지를 분석합니다.The analyzeButtonClick event handler function clears the form, displays the image specified in the URL, then calls the AnalyzeImage function to analyze the image.

다음 코드를 복사하여 analyzeButtonClick 함수에 붙여넣습니다.Copy and paste the following code into the analyzeButtonClick function.

function analyzeButtonClick() {

    // Clear the display fields.
    $("#sourceImage").attr("src", "#");
    $("#responseTextArea").val("");
    $("#captionSpan").text("");

    // Display the image.
    var sourceImageUrl = $("#inputImage").val();
    $("#sourceImage").attr("src", sourceImageUrl);

    AnalyzeImage(sourceImageUrl, $("#responseTextArea"), $("#captionSpan"));
}

분석 2단계: REST API 호출에 대한 래퍼 추가Analyze step 2: Add the wrapper for the REST API call

AnalyzeImage 함수는 REST API 호출을 래핑하여 이미지를 분석합니다.The AnalyzeImage function wraps the REST API call to analyze an image. 성공적으로 반환되면 형식이 지정된 JSON 분석이 지정된 텍스트 영역에 표시되고 캡션이 지정된 범위에 표시됩니다.Upon a successful return, the formatted JSON analysis will be displayed in the specified textarea, and the caption will be displayed in the specified span.

AnalyzeImage 함수 코드를 복사하여 analyzeButtonClick 함수 바로 아래에 붙여넣습니다.Copy and paste the AnalyzeImage function code to just underneath the analyzeButtonClick function.

/* Analyze the image at the specified URL by using Microsoft Cognitive Services Analyze Image API.
 * @param {string} sourceImageUrl - The URL to the image to analyze.
 * @param {<textarea> element} responseTextArea - The text area to display the JSON string returned
 *                             from the REST API call, or to display the error message if there was 
 *                             an error.
 * @param {<span> element} captionSpan - The span to display the image caption.
 */
function AnalyzeImage(sourceImageUrl, responseTextArea, captionSpan) {
    // Request parameters.
    var params = {
        "visualFeatures": "Categories,Description,Color",
        "details": "",
        "language": "en",
    };

    // Perform the REST API call.
    $.ajax({
        url: common.uriBasePreRegion + 
             $("#subscriptionRegionSelect").val() + 
             common.uriBasePostRegion + 
             common.uriBaseAnalyze +
             "?" + 
             $.param(params),

        // Request headers.
        beforeSend: function(jqXHR){
            jqXHR.setRequestHeader("Content-Type","application/json");
            jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", 
                encodeURIComponent($("#subscriptionKeyInput").val()));
        },

        type: "POST",

        // Request body.
        data: '{"url": ' + '"' + sourceImageUrl + '"}',
    })

    .done(function(data) {
        // Show formatted JSON on webpage.
        responseTextArea.val(JSON.stringify(data, null, 2));

        // Extract and display the caption and confidence from the first caption in the description object.
        if (data.description && data.description.captions) {
            var caption = data.description.captions[0];

            if (caption.text && caption.confidence) {
                captionSpan.text("Caption: " + caption.text +
                    " (confidence: " + caption.confidence + ").");
            }
        }
    })

    .fail(function(jqXHR, textStatus, errorThrown) {
        // Prepare the error string.
        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;

        // Put the error JSON in the response textarea.
        responseTextArea.val(JSON.stringify(jqXHR, null, 2));

        // Show the error message.
        alert(errorString);
    });
}

분석 3단계: 응용 프로그램 실행Analyze step 3: Run the application

analyze.html 파일을 저장하고, 웹 브라우저에서 엽니다.Save the analyze.html file and open it in a Web browser. 구독 키를 구독 키 필드에 배치하고, 구독 지역에서 올바른 지역을 사용하고 있는지 확인합니다.Put your subscription key into the Subscription Key field and verify that you are using the correct region in Subscription Region. 분석할 이미지에 대한 URL을 입력한 다음, 이미지 분석 단추를 클릭하여 이미지를 분석하고 결과를 표시합니다.Enter a URL to an image to analyze, then click the Analyze Image button to analyze an image and see the result.

랜드마크 인식Recognize a landmark

Computer Vision의 [랜드마크] 기능은 산이나 유명한 건물과 같은 자연 및 인공 랜드마크에 대한 이미지를 분석합니다.The Landmark feature of Computer Vision analyzes an image for natural and artificial landmarks, such as mountains or famous buildings. 분석이 완료되면 [랜드마크]에서 이미지에 있는 랜드마크를 식별하는 JSON 개체를 반환합니다.Once the analysis is complete, Landmark returns a JSON object that identifies the landmarks found in the image.

자습서 응용 프로그램의 [랜드마크] 기능을 완성하려면 다음 단계를 수행합니다.To complete the Landmark feature of the tutorial application, perform the following steps:

랜드마크 1단계: 양식 단추에 대한 이벤트 처리기 코드 추가Landmark step 1: Add the event handler code for the form button

텍스트 편집기에서 landmark.html 파일을 열고, 파일의 아래쪽에서 landmarkButtonClick 함수를 찾습니다.Open the landmark.html file in a text editor and locate the landmarkButtonClick function near the bottom of the file.

landmarkButtonClick 이벤트 처리기 함수는 양식을 지우고, URL에 지정된 이미지를 표시한 다음, IdentifyLandmarks 함수를 호출하여 이미지를 분석합니다.The landmarkButtonClick event handler function clears the form, displays the image specified in the URL, then calls the IdentifyLandmarks function to analyze the image.

다음 코드를 복사하여 landmarkButtonClick 함수에 붙여넣습니다.Copy and paste the following code into the landmarkButtonClick function.

function landmarkButtonClick() {

    // Clear the display fields.
    $("#sourceImage").attr("src", "#");
    $("#responseTextArea").val("");
    $("#captionSpan").text("");

    // Display the image.
    var sourceImageUrl = $("#inputImage").val();
    $("#sourceImage").attr("src", sourceImageUrl);

    IdentifyLandmarks(sourceImageUrl, $("#responseTextArea"), $("#captionSpan"));
}

랜드마크 2단계: REST API 호출에 대한 래퍼 추가Landmark step 2: Add the wrapper for the REST API call

IdentifyLandmarks 함수는 REST API 호출을 래핑하여 이미지를 분석합니다.The IdentifyLandmarks function wraps the REST API call to analyze an image. 성공적으로 반환되면 형식이 지정된 JSON 분석이 지정된 텍스트 영역에 표시되고 캡션이 지정된 범위에 표시됩니다.Upon a successful return, the formatted JSON analysis will be displayed in the specified textarea, and the caption will be displayed in the specified span.

IdentifyLandmarks 함수 코드를 복사하여 landmarkButtonClick 함수 바로 아래에 붙여넣습니다.Copy and paste the IdentifyLandmarks function code to just underneath the landmarkButtonClick function.

/* Identify landmarks in the image at the specified URL by using Microsoft Cognitive Services 
 * Landmarks API.
 * @param {string} sourceImageUrl - The URL to the image to analyze for landmarks.
 * @param {<textarea> element} responseTextArea - The text area to display the JSON string returned
 *                             from the REST API call, or to display the error message if there was 
 *                             an error.
 * @param {<span> element} captionSpan - The span to display the image caption.
 */
function IdentifyLandmarks(sourceImageUrl, responseTextArea, captionSpan) {
    // Request parameters.
    var params = {
        "model": "landmarks"
    };

    // Perform the REST API call.
    $.ajax({
        url: common.uriBasePreRegion + 
             $("#subscriptionRegionSelect").val() + 
             common.uriBasePostRegion + 
             common.uriBaseLandmark +
             "?" + 
             $.param(params),

        // Request headers.
        beforeSend: function(jqXHR){
            jqXHR.setRequestHeader("Content-Type","application/json");
            jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", 
                encodeURIComponent($("#subscriptionKeyInput").val()));
        },

        type: "POST",

        // Request body.
        data: '{"url": ' + '"' + sourceImageUrl + '"}',
    })

    .done(function(data) {
        // Show formatted JSON on webpage.
        responseTextArea.val(JSON.stringify(data, null, 2));

        // Extract and display the caption and confidence from the first caption in the description object.
        if (data.result && data.result.landmarks) {
            var landmark = data.result.landmarks[0];

            if (landmark.name && landmark.confidence) {
                captionSpan.text("Landmark: " + landmark.name +
                    " (confidence: " + landmark.confidence + ").");
            }
        }
    })

    .fail(function(jqXHR, textStatus, errorThrown) {
        // Prepare the error string.
        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;

        // Put the error JSON in the response textarea.
        responseTextArea.val(JSON.stringify(jqXHR, null, 2));

        // Show the error message.
        alert(errorString);
    });
}

랜드마크 3단계: 응용 프로그램 실행Landmark step 3: Run the application

landmark.html 파일을 저장하고, 웹 브라우저에서 엽니다.Save the landmark.html file and open it in a Web browser. 구독 키를 구독 키 필드에 배치하고, 구독 지역에서 올바른 지역을 사용하고 있는지 확인합니다.Put your subscription key into the Subscription Key field and verify that you are using the correct region in Subscription Region. 분석할 이미지에 대한 URL을 입력한 다음, 이미지 분석 단추를 클릭하여 이미지를 분석하고 결과를 표시합니다.Enter a URL to an image to analyze, then click the Analyze Image button to analyze an image and see the result.

유명 인사 인식Recognize celebrities

Computer Vision의 [유명 인사] 기능은 유명 인사에 대한 이미지를 분석합니다.The Celebrities feature of Computer Vision analyzes an image for famous people. 분석이 완료되면 [유명 인사]에서 이미지에 있는 유명 인사를 식별하는 JSON 개체를 반환합니다.Once the analysis is complete, Celebrities returns a JSON object that identifies the Celebrities found in the image.

자습서 응용 프로그램의 [유명 인사] 기능을 완성하려면 다음 단계를 수행합니다.To complete the Celebrities feature of the tutorial application, perform the following steps:

유명 인사 1단계: 양식 단추에 대한 이벤트 처리기 코드 추가Celebrities step 1: Add the event handler code for the form button

텍스트 편집기에서 celebrities.html 파일을 열고, 파일의 아래쪽에서 celebritiesButtonClick 함수를 찾습니다.Open the celebrities.html file in a text editor and locate the celebritiesButtonClick function near the bottom of the file.

celebritiesButtonClick 이벤트 처리기 함수는 양식을 지우고, URL에 지정된 이미지를 표시한 다음, IdentifyCelebrities 함수를 호출하여 이미지를 분석합니다.The celebritiesButtonClick event handler function clears the form, displays the image specified in the URL, then calls the IdentifyCelebrities function to analyze the image.

다음 코드를 복사하여 celebritiesButtonClick 함수에 붙여넣습니다.Copy and paste the following code into the celebritiesButtonClick function.

function celebritiesButtonClick() {

    // Clear the display fields.
    $("#sourceImage").attr("src", "#");
    $("#responseTextArea").val("");
    $("#captionSpan").text("");

    // Display the image.
    var sourceImageUrl = $("#inputImage").val();
    $("#sourceImage").attr("src", sourceImageUrl);

    IdentifyCelebrities(sourceImageUrl, $("#responseTextArea"), $("#captionSpan"));
}

유명 인사 2단계: REST API 호출에 대한 래퍼 추가Celebrities step 2: Add the wrapper for the REST API call

/* Identify celebrities in the image at the specified URL by using Microsoft Cognitive Services 
 * Celebrities API.
 * @param {string} sourceImageUrl - The URL to the image to analyze for celebrities.
 * @param {<textarea> element} responseTextArea - The text area to display the JSON string returned
 *                             from the REST API call, or to display the error message if there was 
 *                             an error.
 * @param {<span> element} captionSpan - The span to display the image caption.
 */
function IdentifyCelebrities(sourceImageUrl, responseTextArea, captionSpan) {
    // Request parameters.
    var params = {
        "model": "celebrities"
    };

    // Perform the REST API call.
    $.ajax({
        url: common.uriBasePreRegion + 
             $("#subscriptionRegionSelect").val() + 
             common.uriBasePostRegion + 
             common.uriBaseCelebrities +
             "?" + 
             $.param(params),

        // Request headers.
        beforeSend: function(jqXHR){
            jqXHR.setRequestHeader("Content-Type","application/json");
            jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", 
                encodeURIComponent($("#subscriptionKeyInput").val()));
        },

        type: "POST",

        // Request body.
        data: '{"url": ' + '"' + sourceImageUrl + '"}',
    })

    .done(function(data) {
        // Show formatted JSON on webpage.
        responseTextArea.val(JSON.stringify(data, null, 2));

        // Extract and display the caption and confidence from the first caption in the description object.
        if (data.result && data.result.celebrities) {
            var celebrity = data.result.celebrities[0];

            if (celebrity.name && celebrity.confidence) {
                captionSpan.text("Celebrity name: " + celebrity.name +
                    " (confidence: " + celebrity.confidence + ").");
            }
        }
    })

    .fail(function(jqXHR, textStatus, errorThrown) {
        // Prepare the error string.
        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;

        // Put the error JSON in the response textarea.
        responseTextArea.val(JSON.stringify(jqXHR, null, 2));

        // Show the error message.
        alert(errorString);
    });
}

유명 인사 3단계: 응용 프로그램 실행Celebrities step 3: Run the application

celebrities.html 파일을 저장하고, 웹 브라우저에서 엽니다.Save the celebrities.html file and open it in a Web browser. 구독 키를 구독 키 필드에 배치하고, 구독 지역에서 올바른 지역을 사용하고 있는지 확인합니다.Put your subscription key into the Subscription Key field and verify that you are using the correct region in Subscription Region. 분석할 이미지에 대한 URL을 입력한 다음, 이미지 분석 단추를 클릭하여 이미지를 분석하고 결과를 표시합니다.Enter a URL to an image to analyze, then click the Analyze Image button to analyze an image and see the result.

지능적으로 썸네일 생성Intelligently generate a thumbnail

Computer Vision의 [썸네일] 기능은 이미지에서 썸네일을 생성합니다.The Thumbnail feature of Computer Vision generates a thumbnail from an image. 스마트 자르기 기능을 사용하면 [썸네일] 기능에서 이미지의 관심 영역을 식별하고 이 영역에서 썸네일을 가운데에 맞춰 미적으로 더욱 만족스러운 썸네일 이미지를 생성할 수 있습니다.By using the Smart Crop feature, the Thumbnail feature will identify the area of interest in an image and center the thumbnail on this area, to generate more aesthetically pleasing thumbnail images.

자습서 응용 프로그램의 [썸네일] 기능을 완성하려면 다음 단계를 수행합니다.To complete the Thumbnail feature of the tutorial application, perform the following steps:

썸네일 1단계: 양식 단추에 대한 이벤트 처리기 코드 추가Thumbnail step 1: Add the event handler code for the form button

텍스트 편집기에서 thumbnail.html 파일을 열고, 파일의 아래쪽에서 thumbnailButtonClick 함수를 찾습니다.Open the thumbnail.html file in a text editor and locate the thumbnailButtonClick function near the bottom of the file.

thumbnailButtonClick 이벤트 처리기 함수는 양식을 지우고, URL에 지정된 이미지를 표시한 다음, getThumbnail 함수를 두 번 호출하여 두 개의 썸네일을 만듭니다. 하나는 스마트하게 잘린 썸네일이고, 다른 하나는 스마트하게 잘리지 않은 썸네일입니다.The thumbnailButtonClick event handler function clears the form, displays the image specified in the URL, then calls the getThumbnail function twice to create two thumbnails, one smart cropped and one without smart crop.

다음 코드를 복사하여 thumbnailButtonClick 함수에 붙여넣습니다.Copy and paste the following code into the thumbnailButtonClick function.

function thumbnailButtonClick() {

    // Clear the display fields.
    document.getElementById("sourceImage").src = "#";
    document.getElementById("thumbnailImageSmartCrop").src = "#";
    document.getElementById("thumbnailImageNonSmartCrop").src = "#";
    document.getElementById("responseTextArea").value = "";
    document.getElementById("captionSpan").text = "";

    // Display the image.
    var sourceImageUrl = document.getElementById("inputImage").value;
    document.getElementById("sourceImage").src = sourceImageUrl;

    // Get a smart cropped thumbnail.
    getThumbnail (sourceImageUrl, true, document.getElementById("thumbnailImageSmartCrop"), 
        document.getElementById("responseTextArea"));

    // Get a non-smart-cropped thumbnail.
    getThumbnail (sourceImageUrl, false, document.getElementById("thumbnailImageNonSmartCrop"),
        document.getElementById("responseTextArea"));
}

썸네일 2단계: REST API 호출에 대한 래퍼 추가Thumbnail step 2: Add the wrapper for the REST API call

getThumbnail 함수는 REST API 호출을 래핑하여 이미지를 분석합니다.The getThumbnail function wraps the REST API call to analyze an image. 성공적으로 반환되면 썸네일이 지정된 img 요소에 표시됩니다.Upon a successful return, the thumbnail will be displayed in the specified img element.

다음 getThumbnail 함수를 복사하여 thumbnailButtonClick 함수 바로 아래에 붙여넣습니다.Copy and paste the following getThumbnail function to just underneath the thumbnailButtonClick function.

/* Get a thumbnail of the image at the specified URL by using Microsoft Cognitive Services
 * Thumbnail API.
 * @param {string} sourceImageUrl URL to image.
 * @param {boolean} smartCropping Set to true to use the smart cropping feature which crops to the
 *                                more interesting area of an image; false to crop for the center
 *                                of the image.
 * @param {<img> element} imageElement The img element in the DOM which will display the thumnail image.
 * @param {<textarea> element} responseTextArea - The text area to display the Response Headers returned
 *                             from the REST API call, or to display the error message if there was 
 *                             an error.
 */
function getThumbnail (sourceImageUrl, smartCropping, imageElement, responseTextArea) {
    // Create the HTTP Request object.
    var xhr = new XMLHttpRequest();

    // Request parameters.
    var params = "width=100&height=150&smartCropping=" + smartCropping.toString();

    // Build the full URI.
    var fullUri = common.uriBasePreRegion + 
                  document.getElementById("subscriptionRegionSelect").value + 
                  common.uriBasePostRegion + 
                  common.uriBaseThumbnail +
                  "?" + 
                  params;

    // Identify the request as a POST, with the URI and parameters.
    xhr.open("POST", fullUri);

    // Add the request headers.
    xhr.setRequestHeader("Content-Type","application/json");
    xhr.setRequestHeader("Ocp-Apim-Subscription-Key", 
        encodeURIComponent(document.getElementById("subscriptionKeyInput").value));

    // Set the response type to "blob" for the thumbnail image data.
    xhr.responseType = "blob";

    // Process the result of the REST API call.
    xhr.onreadystatechange = function(e) {
        if(xhr.readyState === XMLHttpRequest.DONE) {

            // Thumbnail successfully created.
            if (xhr.status === 200) {
                // Show response headers.
                var s = JSON.stringify(xhr.getAllResponseHeaders(), null, 2);
                responseTextArea.value = JSON.stringify(xhr.getAllResponseHeaders(), null, 2);

                // Show thumbnail image.
                var urlCreator = window.URL || window.webkitURL;
                var imageUrl = urlCreator.createObjectURL(this.response);
                imageElement.src = imageUrl;
            } else {
                // Display the error message. The error message is the response body as a JSON string. 
                // The code in this code block extracts the JSON string from the blob response.
                var reader = new FileReader();

                // This event fires after the blob has been read.
                reader.addEventListener('loadend', (e) => {
                    responseTextArea.value = JSON.stringify(JSON.parse(e.srcElement.result), null, 2);
                });

                // Start reading the blob as text.
                reader.readAsText(xhr.response);
            }
        }
    }

    // Execute the REST API call.
    xhr.send('{"url": ' + '"' + sourceImageUrl + '"}');
}

썸네일 3단계: 응용 프로그램 실행Thumbnail step 3: Run the application

thumbnail.html 파일을 저장하고, 웹 브라우저에서 엽니다.Save the thumbnail.html file and open it in a Web browser. 구독 키를 구독 키 필드에 배치하고, 구독 지역에서 올바른 지역을 사용하고 있는지 확인합니다.Put your subscription key into the Subscription Key field and verify that you are using the correct region in Subscription Region. 분석할 이미지에 대한 URL을 입력한 다음, 썸네일 생성 단추를 클릭하여 이미지를 분석하고 결과를 표시합니다.Enter a URL to an image to analyze, then click the Generate Thumbnails button to analyze an image and see the result.

인쇄된 텍스트 읽기(OCR)Read printed text (OCR)

Computer Vision의 OCR(광학 인식) 기능은 인쇄된 텍스트의 이미지를 분석합니다.The Optical Character Recognition (OCR) feature of Computer Vision analyzes an image of printed text. 분석이 완료되면 OCR에서 텍스트와 이미지 내 텍스트 위치가 포함된 JSON 개체를 반환합니다.After the analysis is complete, OCR returns a JSON object that contains the text and the location of the text in the image.

자습서 응용 프로그램의 OCR 기능을 완성하려면 다음 단계를 수행합니다.To complete the OCR feature of the tutorial application, perform the following steps:

OCR 1단계: 양식 단추에 대한 이벤트 처리기 코드 추가OCR step 1: Add the event handler code for the form button

텍스트 편집기에서 ocr.html 파일을 열고, 파일의 아래쪽에서 ocrButtonClick 함수를 찾습니다.Open the ocr.html file in a text editor and locate the ocrButtonClick function near the bottom of the file.

ocrButtonClick 이벤트 처리기 함수는 양식을 지우고, URL에 지정된 이미지를 표시한 다음, ReadOcrImage 함수를 호출하여 이미지를 분석합니다.The ocrButtonClick event handler function clears the form, displays the image specified in the URL, then calls the ReadOcrImage function to analyze the image.

다음 코드를 복사하여 ocrButtonClick 함수에 붙여넣습니다.Copy and paste the following code into the ocrButtonClick function.

function ocrButtonClick() {

    // Clear the display fields.
    $("#sourceImage").attr("src", "#");
    $("#responseTextArea").val("");
    $("#captionSpan").text("");

    // Display the image.
    var sourceImageUrl = $("#inputImage").val();
    $("#sourceImage").attr("src", sourceImageUrl);

    ReadOcrImage(sourceImageUrl, $("#responseTextArea"));
}

OCR 2단계: REST API 호출에 대한 래퍼 추가OCR step 2: Add the wrapper for the REST API call

ReadOcrImage 함수는 REST API 호출을 래핑하여 이미지를 분석합니다.The ReadOcrImage function wraps the REST API call to analyze an image. 성공적으로 반환되면 텍스트와 텍스트의 위치를 설명하는 형식이 지정된 JSON이 지정된 텍스트 영역에 표시됩니다.Upon a successful return, the formatted JSON describing the text and the location of the text will be displayed in the specified textarea.

다음 ReadOcrImage 함수를 복사하여 ocrButtonClick 함수 바로 아래에 붙여넣습니다.Copy and paste the following ReadOcrImage function to just underneath the ocrButtonClick function.

/* Recognize and read printed text in an image at the specified URL by using Microsoft Cognitive 
 * Services OCR API.
 * @param {string} sourceImageUrl - The URL to the image to analyze for printed text.
 * @param {<textarea> element} responseTextArea - The text area to display the JSON string returned
 *                             from the REST API call, or to display the error message if there was 
 *                             an error.
 */
function ReadOcrImage(sourceImageUrl, responseTextArea) {
    // Request parameters.
    var params = {
        "language": "unk",
        "detectOrientation ": "true",
    };

    // Perform the REST API call.
    $.ajax({
        url: common.uriBasePreRegion + 
             $("#subscriptionRegionSelect").val() + 
             common.uriBasePostRegion + 
             common.uriBaseOcr +
             "?" + 
             $.param(params),

        // Request headers.
        beforeSend: function(jqXHR){
            jqXHR.setRequestHeader("Content-Type","application/json");
            jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", 
                encodeURIComponent($("#subscriptionKeyInput").val()));
        },

        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) {
        // Put the JSON description into the text area.
        responseTextArea.val(JSON.stringify(jqXHR, null, 2));

        // 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);
    });
}

OCR 3단계: 응용 프로그램 실행OCR step 3: Run the application

ocr.html 파일을 저장하고’ 웹 브라우저에서 엽니다.Save the ocr.html file and open it in a Web browser. 구독 키를 구독 키 필드에 배치하고, 구독 지역에서 올바른 지역을 사용하고 있는지 확인합니다.Put your subscription key into the Subscription Key field and verify that you are using the correct region in Subscription Region. 읽을 텍스트의 이미지에 대한 URL을 입력한 다음, 이미지 읽기 단추를 클릭하여 이미지를 분석하고 결과를 표시합니다.Enter a URL to an image of text to read, then click the Read Image button to analyze an image and see the result.

필기 텍스트 읽기(필기 인식)Read handwritten text (Handwriting Recognition)

Computer Vision의 [필기 인식] 기능은 손으로 쓴 텍스트의 이미지를 분석합니다.The Handwriting Recognition feature of Computer Vision analyzes an image of handwritten text. 분석이 완료되면 [필기 인식]에서 텍스트와 이미지 내 텍스트 위치가 포함된 JSON 개체를 반환합니다.After the analysis is complete, Handwriting Recognition returns a JSON object that contains the text and the location of the text in the image.

자습서 응용 프로그램의 [필기 인식] 기능을 완성하려면 다음 단계를 수행합니다.To complete the Handwriting Recognition feature of the tutorial application, perform the following steps:

필기 인식 1단계: 양식 단추에 대한 이벤트 처리기 코드 추가Handwriting Recognition step 1: Add the event handler code for the form button

텍스트 편집기에서 handwriting.html 파일을 열고, 파일의 아래쪽에서 handwritingButtonClick 함수를 찾습니다.Open the handwriting.html file in a text editor and locate the handwritingButtonClick function near the bottom of the file.

handwritingButtonClick 이벤트 처리기 함수는 양식을 지우고, URL에 지정된 이미지를 표시한 다음, HandwritingImage 함수를 호출하여 이미지를 분석합니다.The handwritingButtonClick event handler function clears the form, displays the image specified in the URL, then calls the HandwritingImage function to analyze the image.

다음 코드를 복사하여 handwritingButtonClick 함수에 붙여넣습니다.Copy and paste the following code into the handwritingButtonClick function.

function handwritingButtonClick() {

    // Clear the display fields.
    $("#sourceImage").attr("src", "#");
    $("#responseTextArea").val("");

    // Display the image.
    var sourceImageUrl = $("#inputImage").val();
    $("#sourceImage").attr("src", sourceImageUrl);

    ReadHandwrittenImage(sourceImageUrl, $("#responseTextArea"));
}

필기 인식 2단계: REST API 호출에 대한 래퍼 추가Handwriting Recognition step 2: Add the wrapper for the REST API call

ReadHandwrittenImage 함수는 이미지를 분석하는 데 필요한 두 개의 REST API 호출을 래핑합니다.The ReadHandwrittenImage function wraps the two REST API calls needed to analyze an image. [필기 인식]은 시간이 오래 걸리는 프로세스이므로 2단계 프로세스가 사용됩니다.Because Handwriting Recognition is a time consuming process, a two step process is used. 첫 번째 호출에서 처리할 이미지를 제출합니다. 처리가 완료되면 두 번째 호출에서 감지된 텍스트를 검색합니다.The first call submits the image for processing; the second call retrieves the detected text when the processing is complete.

텍스트가 검색되면 텍스트와 텍스트의 위치를 설명하는 형식이 지정된 JSON이 지정된 텍스트 영역에 표시됩니다.After the text is retrieved, the formatted JSON describing the text and the location of the text will be displayed in the specified textarea.

다음 ReadHandwrittenImage 함수를 복사하여 handwritingButtonClick 함수 바로 아래에 붙여넣습니다.Copy and paste the following ReadHandwrittenImage function to just underneath the handwritingButtonClick function.

/* Recognize and read text from an image of handwriting at the specified URL by using Microsoft 
 * Cognitive Services Recognize Handwritten Text API.
 * @param {string} sourceImageUrl - The URL to the image to analyze for handwriting.
 * @param {<textarea> element} responseTextArea - The text area to display the JSON string returned
 *                             from the REST API call, or to display the error message if there was 
 *                             an error.
 */
function ReadHandwrittenImage(sourceImageUrl, responseTextArea) {
    // Request parameters.
    var params = {
        "handwriting": "true",
    };

    // This operation requrires two REST API calls. One to submit the image for processing,
    // the other to retrieve the text found in the image. 
    //
    // Perform the first REST API call to submit the image for processing.
    $.ajax({
        url: common.uriBasePreRegion + 
             $("#subscriptionRegionSelect").val() + 
             common.uriBasePostRegion + 
             common.uriBaseHandwriting +
             "?" + 
             $.param(params),

        // Request headers.
        beforeSend: function(jqXHR){
            jqXHR.setRequestHeader("Content-Type","application/json");
            jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", 
                encodeURIComponent($("#subscriptionKeyInput").val()));
        },

        type: "POST",

        // Request body.
        data: '{"url": ' + '"' + sourceImageUrl + '"}',
    })

    .done(function(data, textStatus, jqXHR) {
        // Show progress.
        responseTextArea.val("Handwritten image submitted.");

        // Note: The response may not be immediately available. Handwriting Recognition is an
        // async operation that can take a variable amount of time depending on the length
        // of the text you want to recognize. You may need to wait or retry this GET operation.
        //
        // Try once per second for up to ten seconds to receive the result.
        var tries = 10;
        var waitTime = 100;
        var taskCompleted = false;

        var timeoutID = setInterval(function () { 
            // Limit the number of calls.
            if (--tries <= 0) {
                window.clearTimeout(timeoutID);
                responseTextArea.val("The response was not available in the time allowed.");
                return;
            }

            // The "Operation-Location" in the response contains the URI to retrieve the recognized text.
            var operationLocation = jqXHR.getResponseHeader("Operation-Location");

            // Perform the second REST API call and get the response.
            $.ajax({
                url: operationLocation,

                // Request headers.
                beforeSend: function(jqXHR){
                    jqXHR.setRequestHeader("Content-Type","application/json");
                    jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key",
                        encodeURIComponent($("#subscriptionKeyInput").val()));
                },

                type: "GET",
            })

            .done(function(data) {
                // If the result is not yet available, return.
                if (data.status && (data.status === "NotStarted" || data.status === "Running")) {
                    return;
                }

                // Show formatted JSON on webpage.
                responseTextArea.val(JSON.stringify(data, null, 2));

                // Indicate the task is complete and clear the timer.
                taskCompleted = true;
                window.clearTimeout(timeoutID);
            })

            .fail(function(jqXHR, textStatus, errorThrown) {
                // Indicate the task is complete and clear the timer.
                taskCompleted = true;
                window.clearTimeout(timeoutID);

                // 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);
            });
        }, waitTime);
    })

    .fail(function(jqXHR, textStatus, errorThrown) {
        // Put the JSON description into the text area.
        responseTextArea.val(JSON.stringify(jqXHR, null, 2));

        // 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);
    });
}

필기 인식 3단계: 응용 프로그램 실행Handwriting Recognition step 3: Run the application

handwriting.html 파일을 저장하고, 웹 브라우저에서 엽니다.Save the handwriting.html file and open it in a Web browser. 구독 키를 구독 키 필드에 배치하고, 구독 지역에서 올바른 지역을 사용하고 있는지 확인합니다.Put your subscription key into the Subscription Key field and verify that you are using the correct region in Subscription Region. 읽을 텍스트의 이미지에 대한 URL을 입력한 다음, 이미지 읽기 단추를 클릭하여 이미지를 분석하고 결과를 표시합니다.Enter a URL to an image of text to read, then click the Read Image button to analyze an image and see the result.

다음 단계Next steps