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
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