עוץליגוץלי
New member
כלי קטן בnode.js - המרת תיקיית תמונות לjson object
כאשר רוצים לבצע שמוש בהרבה תמונות קטנות, נוצר "צואר בקבוק" בטעינת הקבצים הקטנים (הרבה בקשותHTTP). הדרך השכיחה לטפל בנושא היא שמוש בsprite - תמונה אחת גדולה שכל פעם מציגים חלק אחר ממנה. הבעיה היא התחזוקה.
אז הנה דרך חליפית - קובץ js שנועד להפעלה מתוך node, שהפך תיקיית תמונות לקובץ js אחר (כוללים אותו בפרויקט, ויש אוביקט בשם images שמכיל את כל התמונות בתיקייה לפי היררכיה).
קובץ הjs להפעלה:
צורת הפעלת הקובץ (בהנחה שהוא שמור תחת השם convert_to_json.js) :
דוגמת קוד HTML שמדגימה את השמוש בו:
כאשר רוצים לבצע שמוש בהרבה תמונות קטנות, נוצר "צואר בקבוק" בטעינת הקבצים הקטנים (הרבה בקשותHTTP). הדרך השכיחה לטפל בנושא היא שמוש בsprite - תמונה אחת גדולה שכל פעם מציגים חלק אחר ממנה. הבעיה היא התחזוקה.
אז הנה דרך חליפית - קובץ js שנועד להפעלה מתוך node, שהפך תיקיית תמונות לקובץ js אחר (כוללים אותו בפרויקט, ויש אוביקט בשם images שמכיל את כל התמונות בתיקייה לפי היררכיה).
קובץ הjs להפעלה:
קוד:
'use strict';
var testFolder = './';
function GetFolderDef(path) {
var ans = {};
var fs = require('fs'); //file system
var tempData = fs.readdirSync(path);
var i = null;
var props = null;
var fileContent = null;
var filenameParts = null;
var fileType = "";
var imageFileTypes = ["gif","png"];
for ( i in tempData) {
if (fs.statSync(path + tempData[i]).isDirectory()) {
//props = GetFolderDef(path + tempData[i] + "/");
//props.name = tempData[i];
ans[tempData[i]] = GetFolderDef(path + tempData[i] + "/");
} else {
//props = {}; //base64 ...
//read the file
filenameParts = tempData[i].split(".");
fileType = filenameParts[filenameParts.length-1];
if (0 <= imageFileTypes.indexOf(fileType) ) {
fileContent = fs.readFileSync(path + tempData[i]);
props = fileContent.toString('base64');
ans[tempData[i]] = "data:image/" + fileType + ";base64," + props;
}
}
}
return ans;
}
function main() {
var ans = JSON.stringify( GetFolderDef(testFolder ));
var fs = require('fs'); //file system
fs.writeFile("images.js", "var images = " + ans, function(err) {
if(err) {
return console.log(err);
}
console.log("The file was saved!");
});
}
main();node convert_to_json.jsדוגמת קוד HTML שמדגימה את השמוש בו:
קוד:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>
Test image list
</title>
<script type='text/javascript' src='images.js'> </script>
<script type='text/javascript' >
//console.log (images);
function Init() {
var ul = GetData(images);
//ul.style.display = 'inline-block';
document.getElementById('body').appendChild(ul);
}
function GetData(obj) {
var ul = null;
var li = null;
var i = null;
ul = document.createElement('ul');
for (i in obj) {
li = document.createElement('li');
li.innerHTML = i;
if ("object" == typeof(obj[i])) {
li.appendChild (GetData(obj[i]));
} else {
li.data = obj[i];
li.onclick = function() {
var dest = document.getElementById('imgDest');
dest.src = this.data;
}
}
ul.appendChild(li);
}
return ul;
}
&