0

I'm trying to get logos on images blurred, but I have no idea how to begin. I work with the Microsoft Azure Cognitive Services API to detect any logos in images; I got that working (https://azure.microsoft.com/en-us/services/cognitive-services/computer-vision/)

I want to make API calls, and whenever you try to upload an image, it must automatically blur one or/and all of the logos. I was thinking of manipulating the JavaScript with some CSS code (if possible), but I don't know if this is possible at all. I know I have to do something with the position and brand, but I literally have no clue.

I have tried to make API calls to upload an images, I got this to work. 

<!DOCTYPE html>
<html>
<head>
    <title>Analyze Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>
<body>

<script type="text/javascript">
    function processImage() {
        // **********************************************
        // *** Update or verify the following values. ***
        // **********************************************

        let subscriptionKey = '****';
        let endpoint = 'https://westeurope.api.cognitive.microsoft.com/'
        if (!subscriptionKey) { throw new Error('Set your environment variables for your subscription key and endpoint.'); }

        var uriBase = endpoint + "vision/v2.0/analyze";

        // Request parameters.
        var params = {
            "visualFeatures": "Categories,Description,Color,Brands",
            "details": "",
            "language": "en",
        };

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

        // Make the REST API call.
        $.ajax({
            url: uriBase + "?" + $.param(params),

            // Request headers.
            beforeSend: function(xhrObj){
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.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;
            alert(errorString);
        });
    };
</script>

<h1>Analyze image:</h1>
Enter the URL to an image, then click the <strong>Analyze image</strong> button.
<br><br>
Image to analyze:
<input type="text" name="inputImage" id="inputImage"
    value="https://i2.wp.com/www.dailymanliness.com/wp-content/uploads/2015/08/mgs-snake-.jpg?fit=1920%2C1080" />
<button onclick="processImage()">Analyze 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>
Melvin Rooth
  • 1
  • 1
  • You want to blur only the logo or the whole image? – gugateider Sep 24 '19 at 13:59
  • You should not share your subscriptionKey publicly. Get a new one as soon as possible. – aloisdg Sep 24 '19 at 14:03
  • How do you detect a logo in the image? – Adder Sep 24 '19 at 14:04
  • What is the reason for the requirement of blurring logos? If it is to protect identity, then CSS is insufficient-- any user with knowledge of the browser dev tools can disable those styles and see the logos. If that level of protection is needed, you'll need to alter the image _file_. – Alexander Nied Sep 24 '19 at 14:05
  • @aloisdg oops! I copied the whole document by accident. – Melvin Rooth Sep 24 '19 at 14:30
  • @AlexanderNied The reason is just to test out if it's possible to blur the logo on an image. No need to alter the image file – Melvin Rooth Sep 24 '19 at 14:31
  • @gugateider just the logo – Melvin Rooth Sep 24 '19 at 14:31
  • Are you looking to alter the image itself or to display it with a blur effect? (if a blur effect is enough check https://stackoverflow.com/questions/13681857/blurring-an-image-via-css) – aloisdg Sep 24 '19 at 14:59
  • @aloisdg but is it possible to blur part of the image when you get the positions of the JSON file and manipulate that in the JavaScript using CSS? – Melvin Rooth Sep 24 '19 at 18:33
  • Have you referred to https://www.w3schools.com/howto/howto_css_image_effects.asp – Jim Xu Sep 25 '19 at 03:49

0 Answers0