user1072910 user1072910 - 7 months ago 13
Javascript Question

Evaluating the src attribute in a HTML image tag

I'm going in circles on this one and am hoping you can help.

In my HTML file I have an image tag generated by a third-party plugin that looks like this:

<p><img alt="{x_{3}}^{4}" src="http://latex.abcd.com/gif.latex?%5Cdpi%7B100%7D%20%5Cfn_phv%20%7Bx_%7B3%7D%7D%5E%7B4%7D" /></p>


I would like to be able to do away with the reference to abcd.com and instead have the src point to the data itself. Something like...

<p><img alt="{x_{3}}^{4}" src="data:image/png;base64, ..." /></p>


How would I go about this in jquery?

Thanks!

Mmiz

Answer

I guess this example will help you http://jsfiddle.net/handtrix/yvq5y/

but in your case instead of:

var imageUrl = $(this).find('[name=url]').val();

add the following line

var imageUrl = $(this).find('img').attr('src');

something like that should do it for you.

PS: I don't own the fiddle I just found it online

UPDATE

Here's a version with a fix for the CORS problem

https://jsfiddle.net/9hjpdect/9/