Как я могу сохранить свойство CSS для следующего JavaScript кода (выполнения)?

Question

Я хочу изменить элемент HTML, идентификатор которого является D-изображением, и использовать его в качестве модели прогнозирования. Я пытался изменить CSS, но сохранить его не удалось. Единственное, что я хочу сделать, это изменить его свойство фильтра CSS и использовать измененный (то есть серый) элемент D-изображения для прогнозирования. Вот мой код BODY HTML

Вот мой исходный javascript код

         <script type="text/javascript">
    // More API functions here:
    // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
    // the link to your model provided by Teachable Machine export panel
    const URL = "https://teachablemachine.withgoogle.com/models/ca88ZGYrw/";
    let model, webcam, labelContainer, maxPredictions;
    // Load the image model and setup the webcam
    async function init() {
        const modelURL = URL + "model.json";
        const metadataURL = URL + "metadata.json";
        // load the model and metadata
        // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
        // or files from your local hard drive
        // Note: the pose library adds "tmImage" object to your window (window.tmImage)
        model = await tmImage.load(modelURL, metadataURL);
        maxPredictions = model.getTotalClasses();
        labelContainer = document.getElementById("label-container");
        for (let i = 0; i < maxPredictions; i++) { // and class labels
            labelContainer.appendChild(document.createElement("div"));
        }
    }
    // run the webcam image through the image model
    async function predict() {
        // predict can take in an image, video or canvas html element
        var image = document.getElementById("D-image")
        const prediction = await model.predict(image, false);
        for (let i = 0; i < maxPredictions; i++) {
            const classPrediction =
                prediction[i].className + ": " + prediction[i].probability.toFixed(2);
            labelContainer.childNodes[i].innerHTML = classPrediction;
        }
    }
</script>

Я тоже пробовал это, но когда я делаю прогноз, это не так позвольте мне использовать измененный элемент D-изображения.

        <script type="text/javascript">
    // More API functions here:
    // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
    // the link to your model provided by Teachable Machine export panel
    const URL = "https://teachablemachine.withgoogle.com/models/ca88ZGYrw/";
    let model, webcam, labelContainer, maxPredictions;
    // Load the image model and setup the webcam
    async function init() {
        const modelURL = URL + "model.json";
        const metadataURL = URL + "metadata.json";
        // load the model and metadata
        // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
        // or files from your local hard drive
        // Note: the pose library adds "tmImage" object to your window (window.tmImage)
        model = await tmImage.load(modelURL, metadataURL);
        maxPredictions = model.getTotalClasses();
        labelContainer = document.getElementById("label-container");
        for (let i = 0; i < maxPredictions; i++) { // and class labels
            labelContainer.appendChild(document.createElement("div"));
        }
    }
    // run the webcam image through the image model
    async function predict() {
        // predict can take in an image, video or canvas html element
        var image = document.getElementById("D-image").style.webkitFilter = "grayscale(100%)";
        const prediction = await model.predict(image, false);
        for (let i = 0; i < maxPredictions; i++) {
            const classPrediction =
                prediction[i].className + ": " + prediction[i].probability.toFixed(2);
            labelContainer.childNodes[i].innerHTML = classPrediction;
        }
    }
</script>

Есть ли способ сохранить измененное свойство CSS для следующего javascript кода (выполнения)?

Answer 1

CSS не изменяет данные изображения, поэтому вы не можете использовать его для передачи измененного изображения в функцию JS. Полученные данные изображения после применения CSS вообще недоступны для вашего кода JS. Все, что вы можете получить, - это исходные данные изображения.

Кстати, ваш код заставляет переменную image быть равной строке "grayscale(100%)", потому что результатом любого выражения присваивания является присвоенное значение, поэтому document.getElementById("D-image").style.webkitFilter = "grayscale(100%)" возвращает "grayscale(100%)", тогда вы присваиваете этот результат своей переменной вместо элемента изображения. Вот почему он ломается, когда вы это делаете.

Вы должны изменить данные изображения. Есть способы получить необработанные данные изображения.

После того, как у вас есть эти данные, вам нужно выполнить некоторую обработку, чтобы сделать их оттенками серого, CSS не может служить здесь в качестве ярлыка. Возможно, это поможет .

После того, как вы изменили данные изображения, вы должны преобразовать их в формат, который может принять ваша функция. Похоже, он принимает HTML элементов, поэтому выясните, как превратить его обратно в элемент изображения, и у вас все должно получиться.