如何为下一个JavaScript代码（执行）保存CSS属性？

我想更改HTML元素，其ID为D-image，并将其用作预测模型。我试图更改CSS，但它不允许我保存它。 我想做的唯一一件事就是更改它的CSS过滤器属性，并使用一个已更改（表示为灰色）的D-image元素来预测。 这是我的身体HTML代码

<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<button type="button" onclick="predict()">predict</button>
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="file-upload">
    <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Add Image</button>

    <div class="image-upload-wrap">
        <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
        <div class="drag-text">
            <h3>Drag and drop a file or select add Image</h3>
        </div>
    </div>
    <div class="file-upload-content">
        <img class="file-upload-image" id="D-image" src="#" alt="your image" />
        <div class="image-title-wrap">
            <button type="button" onclick="removeUpload()" class="remove-image">Remove
                <span class="image-title">Uploaded Image</span>
            </button>
        </div>
    </div>
</div>
<div id="webcam-container"></div>
<div id="label-container"></div>

可教机器映像模型
开始
预测
添加图像
拖放文件或选择“添加图像”
去除
上传图像

这是我的原始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>

//此处有更多API函数：
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
//可教机器导出面板提供的指向您的型号的链接
常量URL=”https://teachablemachine.withgoogle.com/models/ca88ZGYrw/";
let模型、网络摄像头、labelContainer、maxPredictions；
//加载图像模型并设置网络摄像头
异步函数init（）{
constmodelURL=URL+“model.json”；
常量metadataURL=URL+“metadata.json”；
//加载模型和元数据
//请参阅API中的tmImage.loadFromFiles（），以支持来自文件选择器的文件
//或本地硬盘上的文件
//注意：姿势库将“tmImage”对象添加到窗口（window.tmImage）
model=wait tmImage.load（modelURL、metadataURL）；
maxPredictions=model.getTotalClass（）；
labelContainer=document.getElementById（“标签容器”）；
对于（设i=0；i

我也尝试过，但当我预测时，它不允许我使用更改后的D-image元素。

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

//此处有更多API函数：
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
//可教机器导出面板提供的指向您的型号的链接
常量URL=”https://teachablemachine.withgoogle.com/models/ca88ZGYrw/";
let模型、网络摄像头、labelContainer、maxPredictions；
//加载图像模型并设置网络摄像头
异步函数init（）{
constmodelURL=URL+“model.json”；
常量metadataURL=URL+“metadata.json”；
//加载模型和元数据
//请参阅API中的tmImage.loadFromFiles（），以支持来自文件选择器的文件
//或本地硬盘上的文件
//注意：姿势库将“tmImage”对象添加到窗口（window.tmImage）
model=wait tmImage.load（modelURL、metadataURL）；
maxPredictions=model.getTotalClass（）；
labelContainer=document.getElementById（“标签容器”）；
对于（设i=0；i

---

有没有办法保存更改后的CSS属性以供下一个javascript代码（执行）使用？

CSS不会修改图像数据，因此您无法使用它将修改后的图像传递给JS函数。应用CSS后生成的图像数据对JS代码根本不可用。您只能访问原始图像数据

顺便说一句，您的代码导致

image

变量等于字符串

“grayscale（100%）”

，因为任何赋值表达式的结果都是赋值，所以

document.getElementById（“D-image”）.style.webkitFilter=“grayscale（100%）”

返回

“grayscale（100%）”

，然后将该结果指定给变量，而不是图像元素。这就是为什么当你这样做的时候它会破裂

您必须修改图像数据

一旦你有了这些数据，你必须做一些处理，使其成为灰度，CSS不能作为一个快捷方式在这里

---

修改图像数据后，必须将其转换为函数可以接受的格式。它似乎接受HTML元素，因此请找出如何将其更改回图像元素，您应该会很好。

请提供一个简单的示例。我不知道model.predict（）在做什么。