Here's what I did to get it to work locally. Probably a similar
modification could be made to make it work on HTTP.
First, I loaded up Eric Shulman's file attach plugins, and the image
sizer (since you use it).
The call-back scheme seemed unnecessarily cumbersome. Maybe there was
a reason for it in some other context. So in the imageinfo.js file,
amongst all the other function literals, I inserted the following
function literal:
ImageInfo.readFileDataTags = function(url) {
var data = config.macros.attach.readFile(url) ;
//loadFile(url) ;
var tags = readInfoFromData(new BinaryFile(data));
tags["mimeType"] = "unk" ; // need to look up better default
tags["byteSize"] = data.length ; // need to return better file
size
value
return tags ;
} ;
Note that this doesn't return the mimeType. The mimeType is not
embedded with the file. There might be a way to get this from Eric's
code as well, but I didn't investigate it. I figure everyone knows
what mimeType the file is based on the extension anyways.
Then I created a tiddler called ImageInfoMacroPlugin, tagged it as
systemConfig, and put this in it:
//{{{
config.macros.ImageData = {};
config.macros.ImageData.handler = function
(place,macroName,params,wikifier,paramString,tiddler) {
var filepath = params.length > 0 ? params[0] : "world";
var outvalue = "" ;
var info = ImageInfo.readFileDataTags(filepath);
outvalue += "Statistics for '" + filepath + "'...\n"
+ "format: " + info["format"] + "\n"
+ "version: " + info["version"] + "\n"
+ "width: " + info["width"] + "\n"
+ "height: " + info["height"] + "\n"
+ "bpp: " + info["bpp"] + "\n"
+ "alpha: " + info["alpha"] + "\n"
+ "mimeType: " + info["mimeType"] + "\n"
+ "byteSize: " + info["byteSize"] + "\n"
+ "exif: " + prettyExif(info["exif"])
;
wikify(outvalue,place) ;
};
//}}}
I created another tiddler called ImageInfoFunctions, and put the Exif
code in it (I don't know how well it works -- there wasn't any Exif
information in the one PNG I tested on ) :
//{{{
// define your own callback function
function prettyExif(exif) {
var str = "";
for (var a in exif) {
if (exif.hasOwnProperty(a)) {
if (typeof exif[a] == "object")
str += " " + a + " : [" + exif[a].length + " values]\r\n";
else
str += " " + a + " : " + exif[a] + "\r\n";
}
}
return str;
}
Finally, in my test tiddler, the text looks like this:
Here is the test tiddler ...
| Thumbnail | Info |h
| [img(145px+,93px+)[file:///C:\downloads\ImageInfoTest\images
\takenote.png]] |<<ImageData "C:\downloads\ImageInfoTest\images
\takenote.png" >> |
Note that the macro wants the full, XP style path with no "file:///"
on the front.
I think some small modifications would make it possible for someone to
run on a web server. In particular, one might modify the
ImageInfo.loadInfo so that it returned the current file info:
ImageInfo.loadInfo = function(url, cb) {
if (!files[url]) {
alert("In loadInfo") ;
readFileData(url, cb);
} else {
if (cb) cb();
}
return files[url] ;
}
and then using that info the same way I did with
ImageInfo.readFileDataTags.
Have fun,
Mark
On Mar 8, 9:28 pm, "Mark S." <[email protected]> wrote:
> I notice in your sample code references to files being served up
> through your localhost. Perhaps that is what you mean? The code I'm
> seeing looks like it needs some kind of server.
>
> Mark
>
> On Mar 8, 8:42 pm, GandyDancer <[email protected]>
> wrote:
>
> > Yes, Mark. The ImageInfo scripts require that the images and the
> > script be in the same domain. I think this is a restriction of the
> > getHTTPrequest functions. However, I was able to run HTML from my C:
> > drive into my browser and make the ImageInfo scripts work with images
> > in the same directory as the HTML.
> > --Andy
>
> > On Mar 8, 11:01 pm, "Mark S." <[email protected]> wrote:
>
> > > It looks to me like ... and perhaps you can confirm ... that the code
> > > only works on web-based image sources (not local drives), and only on
> > > images that are on the same server as code is on. Which severely
> > > limits testing if you don't have a website handy.
>
> > > Mark
>
> > > On Mar 8, 7:31 am, GandyDancer <[email protected]>
> > > wrote:
>
> > > > Good Morning,
> > > > I'm trying to build a TW plugin with additional support for images.
> > > > The ultimate plan is to display the image, some info about the image
> > > > (height, width, etc), and buttons to display the image at several
> > > > different sizes. This is still in proof of concept, so if this
> > > > already exists, let me know.
> > > > I found javascript code that will extract the image info, and I
> > > > built a simple HTML page to test the code. It looks like it works.
> > > > The link to the blog entry
> > > > ishttp://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-wit...
> > > > and the link to the example ishttp://www.nihilogic.dk/labs/imageinfo/
> > > > I also worked through several how-to-build-a-TW-plugin tutorials and
> > > > made a simple TW plugin that works up to the point where it interfaces
> > > > with the image info code. That's where the problems start.
> > > > I often get an error message that something is undefined. I think
> > > > I've got those issues fixed, although I'm sure some of them are
> > > > related to how and where I place some of the code.
> > > > This current code runs without an error message but also without
> > > > placing any image info into the tiddler.
> > > > Thanks for any and all ideas.
> > > > --GandyDancer
>
> > > > p.s. Here's my code.
>
> > > > Here is my MarkupPreHead ...
> > > > <!--{{{-->
> > > > <link rel='alternate' type='application/rss+xml' title='RSS'
> > > > href='index.xml' />
> > > > <!-- include these files fro ImageInfo -->
> > > > <script type="text/javascript" src="./ImageInfo/binaryajax.js"></
> > > > script>
> > > > <script type="text/javascript" src="./ImageInfo/imageinfo.js" ></
> > > > script>
> > > > <script type="text/javascript" src="./ImageInfo/exif.js" ></script>
> > > > <script type="text/javascript" src="ImageInfo/mycallback.js"></script>
> > > > <!--}}}-->
>
> > > > <style type="text/css">#contentWrapper {display:none;}</style><div
> > > > id="SplashScreen" style="border: 3px solid #ccc; display: block; text-
> > > > align: center; width: 320px; margin: 100px auto; padding: 50px;
> > > > color:#000; font-size: 28px; font-family:Tahoma; background-
> > > > color:#eee;"><b>Zyxwythe Photo Album</b> is loading<br><img src="./
> > > > images/ZM_Logo_Green.gif"><br><blink> ...</blink><br><br><span
> > > > style="font-size: 14px; color:red;">Requires Javascript.</span></div>
>
> > > > Here is my plugin ...
> > > > //{{{
> > > > config.macros.ImageData = {};
> > > > config.macros.ImageData.handler = function
> > > > (place,macroName,params,wikifier,paramString,tiddler) {
>
> > > > // this will run when macro is called from a tiddler
> > > > <script type="text/javascript" src="ImageInfo/mycallback.js"></script>
> > > > //debugger;
> > > > var filepath = params.length > 0 ? params[0] : "world";
>
> > > > wikify("ImageDataPlugin attempting to display for " +filepath +".
> > > > Did it work? "+ "\r\n", place);
>
> > > > // define your own callback function
> > > > function prettyExif(exif) {
> > > > var str = "";
> > > > for (var a in exif) {
> > > > if (exif.hasOwnProperty(a)) {
> > > > if (typeof exif[a] == "object")
> > > > str += " " + a + " : [" +
> > > > exif[a].length + " values]\r\n";
> > > > else
> > > > str += " " + a + " : " + exif[a] +
> > > > "\r\n";
> > > > }
> > > > }
> > > > return str;
>
> > > > }
>
> > > > function imageStats(src1) {
> > > > var file = src1;
>
> > > > //var out = document.getElementById("output");
> > > > //out.value = "Loading file '" + file + "'...\r\n";
>
> > > > function callback() {
> > > > var info = ImageInfo.getAllFields(file);
> > > > outvalue += "Statistics for '" + file + "'...\r\n";
> > > > + "format: " + info["format"] + "\r\n"
> > > > + "version: " + info["version"] + "\r\n"
> > > > + "width: " + info["width"] + "\r\n"
> > > > + "height: " + info["height"] + "\r\n"
> > > > + "bpp: " + info["bpp"] + "\r\n"
> > > > + "alpha: " + info["alpha"] + "\r\n"
> > > > + "mimeType: " + info["mimeType"] + "\r\n"
> > > > + "byteSize: " + info["byteSize"] + "\r\n"
> > > > + "exif: " + prettyExif(info["exif"])
> > > > ;
> > > > wikify(outvalue,place);
> > > > }
>
> > > > ImageInfo.loadInfo(file, callback);}
>
> > > > wikify(imageStats(filepath), place);
>
> > > > };
>
> > > > //}}}
>
> > > > Here is the test tiddler ...
> > > > | A | B | C |h
> > > > | 1 | 2 | [img(145px+,93px+)[images/picture_002.png]] | <<ImageData
> > > > images/picture_002.png>> |
> > > > | 4 | 5 | [img(100px+,154px+)[file:///C:/xampp/htdocs/encaps-2.3.18.3/
> > > > rwx/12-17-2009_019_thumb.png]] | [[2X|http://localhost/Image_Resizer/
> > > > image_resizer.php?fp=C:/xampp/htdocs/encaps-2.3.18.3/rwx/
> > > > 12-17-2009_019_thumb.png]] |
> > > > | 7 | 8 | [img(200px+,58px+)[./images/ZM_Logo_Green.gif]] |
> > > > <<ImageData images/ZM_Logo_Green.gif>> |
>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/tiddlywiki?hl=en.
