0

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

user1072910
  • 263
  • 1
  • 5
  • 17

1 Answers1

0

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/

Khaled Al-Ansari
  • 3,910
  • 2
  • 24
  • 27
  • I ran into the following error : "No 'Access-Control-Allow-Origin' header is present on the requested resource. ". So I suspect I can't use this approach, right? – user1072910 Feb 16 '16 at 23:49
  • try this https://jsfiddle.net/9hjpdect/9/ and don't forget to start the link with https @user1072910 – Khaled Al-Ansari Feb 17 '16 at 11:27