I try to display an ascii85 encoded image, like:
<img src='data:image/jpg;base85,...'/>
or
<img src='data:image/jpg;ascii85,...' />
I found several examples on base64 files, but nothing about ascii85...
What do you think?
Thanks
You can't do it because, as far as I know, only PostScript and PDF are able to handle ascii85 (base85). Browsers are only handling base64 for now.
If you already have data in this encoding you will need convert it to base64 before putting it into the browser.
It can be done with some javascript/typescript.
Have the code crawl the DOM
find img/#src attributes that is base85 encoded
write the code to decode base85 and re-encode it in base64
update the IMG src attribute back
Related
I have a thymeleaf html tag that displays an image but the image could be a jpg or it could be a png.
Example
<img th:src="'http://localhost:8081/'+#{'/images/'}+${image}+'.jpg'"/>
I need to substitute the '.jpg' for a wild card extension so as to display either jpg or png
does anyone know what that piece of code at the end is?
Thanks
I don't think it is possible. Thymeleaf has no way to detect what is the type of the file and the browser need the full path of the file to show it.
I would advice to detect/add the file extension at the same place your set the ${image} value.
For example by converting the "image" variable to an object with "name" and "extension" fields
<img th:src="'http://localhost:8081/'+#{'/images/'}+${image.name}+${image.extension}"/>
Loading image using variable containing base64 data in AngularJS
I am trying to find the right way to load a image source from a variable containing base64 encoded image data (for example pulled from a canvas using toDataURL(); ).
At first I just tried it like this:
<img src="{{image.dataURL}}" />
where the image is a scope variable with a variable dataURL containing the base64 data. This is actually working pretty well, the only problem is that I get a 404 error in my console. Something like this:
GET http://www.example.com/%7B%7Bimage.dataURL%7D%7D 404 (Not Found)
Not so pretty. When I tried a more angular style solution like this:
<img data-ng-src="image.dataURL" />
the images are not loading at all.
I made a fiddle which you can find HERE
Any suggestions how to get rid of this error in my console?
EDIT:
Gruff Bunny was right. This <img data-ng-src="{{image.dataURL}}" /> is working...
Working solution can be found HERE
The content of the ng-src needs to be interpolated: Try this:
<img data-ng-src="{{image.dataURL}}"/>
I admit I spent way too much time trying to fix similar problem,
my problem was I had extra brace here (see three braces at end):
ng-attr-src="{{aad.form.imageBase64Temp}}}"
I was playing around with basic4android and and tried to create a simple webserver. Everything fine but somehow I didn't manage to send an image as binary file. I found the problem and everything is ok now but in the meantime I was desperate and thought I could send a binary file as text coded in base64. I am still busy with that idea but cannot find proper information how a valid http response would look like with a base64 encoded image.
I guess it should look similar to something like this:
HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: lengthofthefollowingdata
dataofimagecodedinbase64
Can someone post a proper working example?
Do the standard browsers accept images coded in base64?
There is no base64 encoding in HTTP responses. It would be possible (but useless) to define it as new Transfer-Coding or Content-Coding.
lets take the $base64string var as example loading in it and image file by this way:
$base64string = base64_encode(file_get_contents("image.jpg"));
first u got to do is set the content type by this php code:
header("Content-Type: image/jpeg") //if your data is format jpeg
if your data is stored as base64 so you will have to decode it by this code:
$decoded_data = base64_decode($base64string);
then all you have to do is write the decoded data by an echo.
echo $decoded_data;
Optionally: if you want to insert an image in HTML or CSS u dont have to decode the base64 string... example:
HTML IMG TAG:
<img src="data:image/jpeg;base64,<?php echo $base64string; ?>" alt="image" />
CSS INLINE BACKGROUND PROPERTY:
style="background: url('data:image/jpeg;base64,<?php echo $base64string; ?>';"
I'm using mediawiki 1.17 so I tried both:
$wgAllowImageTag = true;
$wgRawHtml = true; #I know it's insecure just wanted to see if it'd work
My img tags of the form:
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>
Are getting rendered as:
<img alt="Base64 encoded image" width="150" height="150" />
If i edit the page, the img tag still has all the data.
Background
I'm exporting kb articles from my CRM system (sugarcrm). Sugar encodes the images linked to each KB article in base64. This makes it pretty convenient for syncing those images to the mediawiki site without having to export / relink images. So, would be great if I could get mediawiki to allow the base64 encoded images. In my case our mediawiki site is not edited by the general public, just members of our company.
Did you turn on $wgAllowExternalImages = true;
I know technically it isn't an external image, but maybe mediawiki is treating it as such. You could also try whitelisting it.
Although it's unlikely that you still need this, it may help others: I just created some patch instructions to make MediaWiki (and the CKeditor-based WYSIWYG extension) support base64 images.
https://github.com/limasierra/MediaWiki-Base64-patch
hth
Is there a way to send only an Image with a link and some alt text for each item in an RSS feed?
I looked at the enclosure tag but this is only for videos and music.
The enclosure element can be used to transmit pictures. The RSS 2.0 spec is quite clear about that, saying that the type is a MIME type. It does not say it is restricted to audio or video.
Here's an example: a set of photo feeds from Agence France Presse
One of solutions is to use CDATA in description
<![CDATA[
Image inside RSS
<img src="http://example.com/img/smiley.gif" alt="Smiley face">
]>
Note, that you may have a problem with hotlink prevented site.
This is possible in RRS2,
see
http://cyber.law.harvard.edu/rss/rss.html#ltenclosuregtSubelementOfLtitemgt
So you have to use the enclosure tag, to add media
You should use the enclosure tag within item to include the image. You can use it for images by setting the correct Mime Type (for example: image/jpeg) and including the image size as the "length" attribute. The length attribute doesn't need to be completely accurate but it's required for the RSS to be considered valid.
Here's a helpful article that discusses this and other options.
To work with the Mailchimp RSS to email feature, they expect the image to be specified in a <media:content> element inside <item>. This is their source for the feed item's image macro in their templates.
Thus, you need to add to the declarations
xmlns:media="http://search.yahoo.com/mrss/
Then inside the <item> element add
<media:content medium="image" url="http://whatever/foo.jpg" width="300" height="201" />
Without the extra declaration, the feed is invalid since media:content is not a known element.
Inside tag ITEM
<image:image xmlns:image="http://web.resource.org/rss/1.0/modules/image/">
http://domain. com/image.jpg
< /image:image>
Inside Description Tag
<![CDATA[
Some Text..
<br/><img src='http://domain. com/image.jpg' ><br/>
More Text
]]>
Regarding the <p> tag issue, You need to encode html within the xml.
Your code would look something like this:
<description><p> Text in the tag </p></description>
Since you are using php you can use htmlentities() to encode the html tags. They look horrible in the xml but RSS readers know what to do with it.
http://php.net/manual/en/function.htmlentities.php