Я пытаюсь получить размытые логотипы на изображениях, но понятия не имею, с чего начать.Я работаю с Microsoft Azure Cognitive Services API для обнаружения любых логотипов в изображениях;Я получил это работает (https://azure.microsoft.com/en-us/services/cognitive-services/computer-vision/)
Я хочу сделать вызовы API, и всякий раз, когда вы пытаетесь загрузить изображение, оно должно автоматически размыть один или / и все логотипы. Я думал о манипулировании JavaScriptс некоторым кодом CSS (если это возможно), но я не знаю, возможно ли это вообще. Я знаю, что я должен что-то сделать с позицией и брендом, но я буквально не имею понятия.
У меня естьпопытался сделать вызовы 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>