I cant get exif data from displayed image address
by click on photo You should see the exif data.
var someCallback = function(e) {
$('#cameraModel').val(e.Model);
$('#aperture').val(e.FNumber);
$('#created').val(e.DateTime);
$('#taken').val(e.DateTimeOriginal);
$('#copyright').val(e.Copyright);
$('#description').val(e.ImageDescription);
$('#artist').val(e.Artist);
$('#latitude').val(e.GPSLatitude[2]);
$('#longitude').val(e.GPSLongitude[2]);
//Uncomment the line below to examine the
//EXIF object in console to read other values
//console.log(e);
}
$('#fdd').on('click', function (e) {
alert($(this).attr("src"));
$(this).fileExif(someCallback);
});
please help... jsfiddle
From the fiddle, you're trying to use the fileExif method from https://github.com/sanisoft/jQuery-fileExif. You have several problems here:
You did not load the library in your fiddle (hence I had to guess which library you tried to use. Hint: read the console log, a message like Uncaught TypeError: Object [object Object] has no method 'fileExif' means you're missing code or trying the call on the wrong object)
That library cannot be loaded into a fiddle because it uses document.write. You can remove this code from the plugin to get it to work in a fiddle; it's only needed for IE:
document.write(
"<script type='text/vbscript'>\r\n"
+ "Function IEBinary_getByteAt(strBinary, iOffset)\r\n"
+ " IEBinary_getByteAt = AscB(MidB(strBinary,iOffset+1,1))\r\n"
+ "End Function\r\n"
+ "Function IEBinary_getLength(strBinary)\r\n"
+ " IEBinary_getLength = LenB(strBinary)\r\n"
+ "End Function\r\n"
+ "</script>\r\n"
);
You are using the wrong library. That one is for file uploads, not image elements. You should try using the original jquery exif plugin, here: http://www.nihilogic.dk/labs/exifjquery/
Related
I'm using Vue3 & TypeScript to build a TipTap Wysiwyg editor.
Having issues when trying to use the Link Extension (other extensions such as StarterKit, Highlight and TaskList work fine).
Following the docs here: https://tiptap.dev/api/marks/link/
I installed the correct Link extension yarn add #tiptap/extension-link
imported import Link from '#tiptap/extension-link'
Added the Link extension using default options to the editor as such:
setup() {
const editor = useEditor({
extensions: [..., Link],
...
return {
editor,
}
}
Getting the following error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'target') tiptap-extension-link.esm.js?2dbe:148
Any help will be greatly appriciated.
the extension-link is currently beta as you can see in the npm package site, so I believe there are currently bugs or missing parameters inside the package itself so to overcome that error you can pass the parameter yourself by configuring the Link like this:
Link.configure({
HTMLAttributes: { target: '_blank' },
linkOnPaste: false,
openOnClick: true,
}),
and by doing that, the package might not work as intended which as happened to me so you can make use of the fact that now your editor understands the tag but the logic to transformed to links automatically might not work so you should write the logic urself and pass the new text to the editor like this:
replaceUrls(string) {
const urlRegex = /(?<!href=")(?<!>)(((https?:\/\/)|(www\.))[^\s|<]+)/g
return string.replace(urlRegex, (url) => {
let hyperLink = url
if (!hyperLink.match('^https?://')) {
hyperLink = 'http://' + hyperLink
}
return (
'<a href="' + hyperLink + '" target="_blank" >' + url + '</a> '
)
})
}
and so you can update your Editor content with this command so you can transform the links into a tags that the editor understands
editor.commands.setContent(replaceUrls(editor.getHTML()), false)
I am working on a Google Extension and using Google Storage.
Below is my code for saving and accessing the saved data. I checked the console and the data is saving correctly. However, when I access this data using chrome.storage.local.get console returns undefined for the value and not the value saved.
Code for Saving: save.js for popup.html
function save() {
# the id is for a textarea in another html page
var text = document.getElementById("text").value;
chrome.storage.sync.set({"txt": text}, function(){
# console states the correct value
console.log('Value is set to ' + text);
});
# this is the page I want to retrieve the saved data in
window.location.replace("anotherHTMLpage.html");
}
Code for Accessing: retrieve.js for anotherHTMLpage.html
function retrieve() {
chrome.storage.sync.get(["txt"], function(data) {
# console says "value currently is undefined"
console.log('Value currently is ' + data.key);
});
}
Thanks for the help in advance!
Chrome saves the data under the key you set it as. In your example, you saved it as txt, so it will be under data.txt not data.key.
Check out the docs for some more details https://developer.chrome.com/docs/extensions/reference/storage/#usage
I am trying to do this:
Read html document "myDocument.html" with Node
Insert contents of another html document named "foo.html" immediately after the open body tag of myDocument.html.
Insert contents of yet another html document named "bar.html" immediately before the close body tag of myDocument.html.
Save the modified version of "myDocument.html".
To do the above, I would need to search the DOM with Node to find the open and closing body tags.
How can this be done?
Very simply, you can use the native Filesystem module that comes with Node.JS. (var fs = require("fs")). This allows you to read and convert the HTML to a string, perform string replace functions, and finally save the file again by rewriting it.
The advantage is that this solution is completely native, and requires no external libraries. It is also completely faithful to the original HTML file.
//Starts reading the file and converts to string.
fs.readFile('myDocument.html', function (err, myDocData) {
fs.readFile('foo.html', function (err, fooData) { //reads foo file
myDocData.replace(/\<body\>/, "<body>" + fooData); //adds foo file to HTML
fs.readFile('bar.html', function (err, barData) { //reads bar file
myDocData.replace(/\<\/body\>/, barData + "</body>"); //adds bar file to HTML
fs.writeFile('myDocumentNew.html', myDocData, function (err) {}); //writes new file.
});
});
});
In a simple but not accurate way, you can do this:
str = str.replace(/(<body.*?>)/i, "$1"+read('foo.html'));
str = str.replace(/(<\/body>)/i, read('bar.html')+'$1');
It will not work if the myDocument content contains multiple "<body ..' or '</body>', e.g. in javascript, and also the foo.html and bar.html can not contains '$1' or '$2'...
If you can edit the content of myDocument, then you can leave some "placeholder" there(as html comments), like
<!--foo.html-->
Then, it's easy, just replace this "placeholder" .
Use the cheerio library, which has a simplified jQuery-ish API.
var cheerio = require('cheerio');
var dom = cheerio(myDocumentHTMLString);
dom('body').prepend(fooHTMLString);
dom('body').append(barHTMLString);
var finalHTML = dom.html();
And just to be clear since the legions of pro-regex individuals are already appearing in droves, yes you need a real parser. No you cannot use a regular expression. Read Stackoverflow lead developer Jeff Atwood's post on parsing HTML the Cthulhu way.
I want to redo my blog but my code below seems to be returning [function] whenever I console.log it. Yes it is the correct path, and it used to work before I updated jade but not anymore.
post.stub = jade.compile(
fs.readFileSync(__dirname + '/blog/' + p + '/stub.jade')
)
How do I fix this so that console.log(post.stub) will return my :markdown present in the jade file instead of [function] ?
Thanks in advance.
Updated answer:
post.stub = jade.compile(
fs.readFileSync(__dirname + '/blog/' + p + '/stub.jade')
)({})
This is how jade and all similar template systems work. There are 2 steps:
Convert a jade text template into a function (only needs to happen once per template)
Take a set of context data, run it through the compiled template function, and return the rendered string as HTML (happens every time you have unique context data)
So if your template doesn't need any context data, just invoke it with an empty object (probably null/undefined would also work fine):
post.stub = jade.compile(
fs.readFileSync(__dirname + '/blog/' + p + '/stub.jade')
)({})
See also the jade javascript API docs.
I'm using mongodb to store application error logs as json documents. I want to be able to format the error logs as HTML rather than returning the plain json to the browser. The logs are properly schemaless - they could change at any time, so it's no use trying to do this (in Jade):
- var items = jsonResults
- each item in items
h3 Server alias: #{item.ServerAlias}
p UUID: #{item.UUID}
p Stack trace: #{item.StackTrace}
h3 Session: #{item.Session}
p URL token: #{item.Session.UrlToken}
p Session messages: #{item.Session.SessionMessages}
as I don't know what's actually going to be in the JSON structure ahead of time. What I want is surely possible, though? Everything I'm reading says that the schema isn't enforced by the database but that your view code will outline your schema anyway - but we've got hundreds of possible fields that could be removed or added at any time so managing the views in this way is fairly unmanageable.
What am I missing? Am I making the wrong assumptions about the technology? Going at this the wrong way?
Edited with extra info following comments:
The json docs look something like this
{
"ServerAlias":"GBIZ-WEB",
"Session":{
"urltoken":"CFID=10989&CFTOKEN=f07fe950-53926E3B-F33A-093D-3FCEFB&jsessionid=84303d29a229d1",
"captcha":{
},
"sessionmessages":{
},
"sessionid":"84197a667053f63433672873j377e7d379101"
},
"UUID":"53934LBB-DB8F-79T6-C03937JD84HB864A338",
"Template":"\/home\/vagrant\/dev\/websites\/g-bis\/code\/webroot\/page\/home\/home.cfm, line 3",
"Error":{
"GeneratedContent":"",
"Mailto":"",
"RootCause":{
"Message":"Unknown tag: cfincflude.",
"tagName":"cfincflude",
"TagContext":[
{
"RAW_TRACE":"\tat cfhome2ecfm1296628853.runPage(\/home\/vagrant\/dev\/websites\/nig-bis\/code\/webroot\/page\/home\/home.cfm:3)",
"ID":"CFINCLUDE",
"TEMPLATE":"\/home\/vagrant\/dev\/websites\/nig-bis\/code\/webroot\/page\/home\/home.cfm",
"LINE":3,
"TYPE":"CFML",
"COLUMN":0
},
{
"RAW_TRACE":"\tat cfdisplay2ecfm1093821753.runPage(\/home\/vagrant\/dev\/websites\/nig-bis\/code\/webroot\/page\/display.cfm:6)",
"ID":"CFINCLUDE",
"TEMPLATE":"\/home\/vagrant\/dev\/websites\/nig-bis\/code\/webroot\/page\/display.cfm",
"LINE":6,
"TYPE":"CFML",
"COLUMN":0
}
]
}
}
... etc, but is likely to change depending on what the individual project that generates the log is configured to trigger.
What I want to end up with is a formatted HTML page with headers for each parent and the children listed below, iterating right through the data structure. The Jade sample above is effectively what we need to output, but without hard-coding that in the view.
Mike's analysis in the comments of the problem being that of creating a table-like structure from a bunch of collections that haven't really got a lot in common is bang-on. The data is relational, but only within individual documents - so hard-coding the schema into anything is virtually impossible as it requires you to know what the data structure looks like first.
The basic idea is what #Gates VP described. I use underscore.js to iterate through the arrays/objects.
function formatLog(obj){
var log = "";
_.each(obj, function(val, key){
if(typeof(val) === "object" || typeof(val) === "array"){
// if we have a new list
log += "<ul>";
log += formatLog(val);
log += "</ul>";
}
else{
// if we are at an endpoint
log += "<li>";
log += (key + ": " + val);
log += "</li>";
}
});
return log;
}
If you call formatLog()on the example data you gave it returns
ServerAlias: GBIZ-WEBurltoken: CFID=10989&CFTOKEN=f07fe950-53926E3B-F33A-093D-3FCEFB&jsessionid=84303d29a229d1sessionid: 84197a667053f63433672873j377e7d379101UUID: 53934LBB-DB8F-79T6-C03937JD84HB864A338Template: /home/vagrant/dev/websites/g-bis/code/webroot/page/home/home.cfm, line 3GeneratedContent: Mailto: Message: Unknown tag: cfincflude.tagName: cfincfludeRAW_TRACE: at cfhome2ecfm1296628853.runPage(/home/vagrant/dev/websites/nig-bis/code/webroot/page/home/home.cfm:3)ID: CFINCLUDETEMPLATE: /home/vagrant/dev/websites/nig-bis/code/webroot/page/home/home.cfmLINE: 3TYPE: CFMLCOLUMN: 0RAW_TRACE: at cfdisplay2ecfm1093821753.runPage(/home/vagrant/dev/websites/nig-bis/code/webroot/page/display.cfm:6)ID: CFINCLUDETEMPLATE: /home/vagrant/dev/websites/nig-bis/code/webroot/page/display.cfmLINE: 6TYPE: CFMLCOLUMN: 0
How to format it then is up to you.
This is basically a recursive for loop.
To do this with Jade you will need to use mixins so that you can print nested objects by calling the mixin with a deeper level of indentation.
Note that this whole thing is a little ugly as you won't get guaranteed ordering of fields and you may have to implement some logic to differentiate looping on arrays vs. looping on JSON objects.
You can try util.inspect. In your template:
pre
= util.inspect(jsonResults)