Graham
If you are using a PC or laptop
There is a javascript bookmark that will convert almost any image on the web into base64 data
You just open the image in it's own page and click the bookmark
get it from here
http://jsfiddle.net/bgmort/m26yr/
Graham
This javascript and filelist script utility will only work on HTML5 browsers able to handle dynamic content and the canvas element
It converts image files into base64 data uri's.
When the image is clicked the base64 data uri will appear in the textarea
This can then be used in the 'src' parameter of the img tag
Note: base64 data uri's take about 33% more space than a normal image but means the images can be embedded directly into code or css
Animated images will be static when converted
WARNING this script is only really for small images trying to convert large images will cause your browser to lockup for several seconds or even run out of memory
It is run on the browser NOT xtgems servers
<script>
function getDataUri(url, callback) {
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
canvas.getContext('2d').drawImage(this, 0, 0);
callback(canvas.toDataURL('image/png'));
};
image.src = url;
}
function b64(img){
getDataUri(img, function(dataUri) {
document.getElementById('output').innerHTML=dataUri;
})};
</script>
<div class="xt_container">
<xt:filelist folder="/images" template="<img src=".file_url." alt="*" onclick="b64(this.src)" /><br />" per_page="10"/>
<textarea id="output" style="display:block;margin:0 auto; width:98%;height:20em"></textarea>
</div>
Copy code
