如何将数据保存到xml文件中？

Question

我想将数据从html网页保存到本地文件夹中的空XML文件中。

首先，我将视频与对象的坐标放在一起，这意味着将JSON文件中的框数据定界。

现在，如果我按保存按钮，则我的代码必须读取屏幕或可用的对象边界框数据并将其保存为XML格式，并且还必须与XML一起保存特定图像。

这是我想要的XML格式：

<annotation>
<folder>img</folder>
<filename>55.jpg</filename>
<path>/home/55.jpg</path>
<source>
    <database>Unknown</database>
</source>
<size>
    <width>1280</width>
    <height>720</height>
    <depth>3</depth>
</size>
<segmented>0</segmented>
<object>
    <name>speed</name>
    <pose>Unspecified</pose>
    <truncated>0</truncated>
    <difficult>0</difficult>
    <bndbox>
        <xmin>1083</xmin>
        <ymin>134</ymin>
        <xmax>1142</xmax>
        <ymax>218</ymax>
    </bndbox>
</object>
</annotation>

这是我的HTML代码，我从这里获取屏幕对象数据，并希望以上述XML格式保存并将其保存到本地文件夹中：

function save(obj,textnew){                                               
            canvasfabric.forEachObject(function(obj){

            alert("frame : "  + i  + "\n" 
                   +      "x : " + obj.left   + "\n"
                   +      "y : " + obj.top    + "\n" 
                   +  "width : " + obj.width  + "\n" 
                   + "height : " + obj.height + "\n" 
                   +  "class : " + obj.getObjects()[1].text); 
            });
            //alert("Data has been saved Successfully");
        }

这是JSON文件：

{
"Frame_count":5,

    "Objects_detected":1,
    output:[

    {
    "Objects_classname":"speed",
        "x_val":"1083",
        "y_val":"134",
        "width":"1142",
        "height":"218"
    },

    ],
    "Total_objects_detected":"1"
}

从这里我正在从视频文件中绘制图像：

 window.onload = function(){
                       // zoom();
                        canvas = document.getElementById('layer1');
                        ctx = canvas.getContext('2d');
                        video = document.getElementById('video');
                        document.body.appendChild(canvas);

                        video.addEventListener('play', function() {
                            timerID = window.setInterval(function(){
                                ctx.drawImage(video,0 ,0 ,1280, 720);
                                Drawobstakle(); //fetch the json data and draw rectangle bounding box
                            },100);
                        });

让我知道是否需要更多信息。