javascript - 从 json 字符串解析图像

Question

我需要从纯 json 字符串获取所有图像(用于进一步转换为 Canvas )...

例如，我可以使用 json 字符串:

<p>someText</p>
<img src="">

或

asdasdasasd
asdasdasd
asd <img class="asd" src="123">

我这样使用它:

var html = $.parseHTML(someString)

**

.children('img')
.find('img')

但是这些功能不起作用(

如何从此 html 中获取所有 img 对象？所以，我可以进一步将它与 drawImage ( Canvas )

一起使用

这可能吗？

更新

例如，通过ajax我得到这样的数据:

<p>someText</p>
<img src="">

或

asdasdasasd
asdasdasd
asd <img class="asd" src="123">

或

<h3><p>someText <img src=""></p><h3>

等等...

不知何故，我需要将此字符串转换为“虚拟”DOM，在其中我可以获取图像(以及其他元素)并使用 jQuery 对其进行操作。就像我可以为我的窗口对象获取图像:$('img') - 这将从页面主体中获取所有图像。我的绳子需要类似的东西。所以，我可以通过 jQuery 使用这些图像。

Answer 1

您在 parseHTML 函数之后得到一个数组。我认为，你应该遍历它并查看它是否是图像，获取它并添加 $(array_element)。

经过此过程，您将获得一个可以使用 attr()、find() 等函数的 Jquery 对象。

var k    = '<p>sosmeT22ext2</p><img class="c" src="empty"><img class="empty" src="123">';
var html = $.parseHTML(k);

for(var i = 0; i < html.length; i++){
    if(html[i] instanceof HTMLImageElement){
        console.log($(html[i]).attr("src")); // all jquery functions works on $(html[i])
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

更新

以上代码在嵌套 dom html 中不起作用。因为如你所见，它只是遍历一层。下面的代码比较复杂，因为它是递归方法。我的建议是，如果你的dom没有嵌套使用第一个代码块，那么就不要使用递归方法来提取和使用你的图像。

var k    = '<div><p>s133o4s3meT232ext2</p><img class="c" src="empty"><img class="empty" src="123"></div>';
var html = $.parseHTML(k);

var images_arr = [];
get_child_nodes(html);
console.log(images_arr[1].attr("src"));

function get_child_nodes(html_l){
    for(var i = 0; i < html_l.length; i++){
        if(html_l[i] instanceof HTMLImageElement){
            images_arr.push($(html_l[i]));
        }
        else {
            for(var j = 0; j < html_l[i].childNodes.length; j++){
                get_child_nodes($(html_l[i].childNodes[j]));
            }
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>