Parse image from json string

Question

I need to get all my images (for futher converting to canvas) from plain json string...

For example i can have in json string:

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

or

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

and i use it so:

var html = $.parseHTML(someString)

**

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

but those functions didn't work(

How can i get all my img objects from this html? So, that i can further use it with drawImage (canvas)

is it possible?

upd

via ajax i get, for example, such data:

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

or

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

or

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

etc...

and somehow i need to convert this string to a 'virtual' DOM, where i can get images (and other elements too) and manipulate with them with jQuery. Like i can fetch images for my window-object: $('img') - this will fetch all images from page body. And i need something similar for my string. So, that i can use this images with jQuery.

Hard to understand what you are asking. What is this "json string"? Does it contain the html shown? And where are you using .children().find()? — charlietfl
– charlietfl, Commented Dec 17, 2016 at 20:53
A workaround, wrap your HTML (you get from your "json string") in a Root-Element: $('<div><p>someText</p><img src=""></div>').find('img') or $('<div></div>').append($('<p>someText</p><img src="">')).find('img') Not sure what a better/easier solution would be. — dav1d
– dav1d, Commented Dec 17, 2016 at 20:56
If it is only the html shown, change find() to filter() since the image is at root level of that html — charlietfl
– charlietfl, Commented Dec 17, 2016 at 20:58
@charlietfl yes, string contain such elements as described. I tried html.children('img'), $(html).children('img') (and same with find) — byCoder
– byCoder, Commented Dec 17, 2016 at 20:59
We need more code context. Provide a minimal reproducible example — charlietfl
– charlietfl, Commented Dec 17, 2016 at 21:00

Community · Accepted Answer · 2020-06-20 09:12:55Z

You are getting an array after the parseHTML function. I think, you should traverse it and look that if it is an image, get it and add $(array_element).

After this process, you will get a Jquery object that can use attr(), find() etc. functions.

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>

Update

Above code doesn't work in nested dom html. Because it just traverse in one level as you see. Below code is more complicated beacuse it is a recursive method. My suggestion is that, if your dom is not nested use the first code block, it is not use the recursive method to extract and use your images.

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>

@charlietfl thank you charlie, I didn't think for the examples but you are right I updated my answer.

dav1d · Accepted Answer · 2016-12-17 21:06:31Z

0

Adding to my comment, found the actual solution for your Problem:

> $('<p>someText</p><img src="">').filter('img')
[img]

The problem is that your HTML does not have a child which can be an img, but one of the root elements is, filter takes the root elements into account.

Compare (bad/worse but finds nested):

> $('<div><p>someText</p><img src=""></div>').find('img') 
> $('<div></div>').append($('<p>someText</p><img src="">')).find('img')

Solution that always works, combining the selectors find and filter without creating an extra root element:

> $('<p>someText</p><img src=""><div><img></div>').filter('img')
[img]
> $('<p>someText</p><img src=""><div><img></div>').find('img')
[img]
> h = $('<p>someText</p><img src=""><div><img></div>')
[p, img, div]
> h.find('img').add(h.filter('img'))
[img, img]

edited Dec 17, 2016 at 21:06

answered Dec 17, 2016 at 20:59

dav1d

6,0851 gold badge37 silver badges52 bronze badges

6 Comments

charlietfl Over a year ago

Your comment above about the wrapper might also be proper approach depending on if images might be nested also or not. Then find() would get all images regarding of nesting level

dav1d Over a year ago

Yes, but not for the examples Op has shown, assuming that's all he needs.

charlietfl Over a year ago

Right, I'm only suggesting that if example is over simplified and there could be unknown structure

byCoder Over a year ago

@charlietfl check upd

charlietfl Over a year ago

Over-complicated it . var $images = $('<div>').html(HtmlString).find('img')

|

Collectives™ on Stack Overflow

Parse image from json string

2 Answers 2

Update

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related