时间戳

首页 > 解决方案 > 用 JavaScript 编码时是否可以操作图像的 CSS？

javascript - 用 JavaScript 编码时是否可以操作图像的 CSS？

问题描述

我正在尝试使图像上的徽标模糊，但我不知道如何开始。我使用 Microsoft Azure Cognitive Services API 来检测图像中的任何徽标；我得到了那个工作（https://azure.microsoft.com/en-us/services/cognitive-services/computer-vision/）

我想进行 API 调用，每当您尝试上传图像时，它必须自动模糊一个或/和所有徽标。我正在考虑使用一些 CSS 代码（如果可能的话）来操作 JavaScript，但我不知道这是否可能。我知道我必须对位置和品牌做点什么，但我真的不知道。

我试图通过 API 调用来上传图像，我得到了这个工作。

<!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>

标签： javascripthtmlcssazureapi

解决方案

推荐阅读