So I'm relatively new to JavaScript and I'm attempting to learn OpenCV.js for a web app I'm working on. I've been following tutorials like this to try and understand how it works.
However, I've been getting the error below where the haar cascade file isn't being loaded and I can't seem to fix it.
Error: Assertion failed (!empty()) in detectMultiScale, file /build/master-contrib_docs-lin64/opencv/modules/objdetect/src/cascadedetect.cpp
I've looked for resolutions to this problem and most people suggest that you should use the full directory when loading a cascade file. I've tried referencing the file directly and using the full file path, either way doesn't seem to work for me.
This is how I've attempted load the file.
let classifier = new cv.CascadeClassifier();
// Load the haarcascade file
let utils = new Utils('errorMessage');
let faceCascadeFile = 'http://localhost/eeu8cb/xml/haarcascade_frontalface_default.xml';
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
classifier.load(faceCascadeFile)
});
// Checks if the haarcascade file has failed to load
if(!classifier.load(faceCascadeFile)){
console.log('failed to load file.')
}
I've done some error checking which confirms the file isn't being loaded. Any help would be appriciated, cheers.
Some month ago i worked right on OpenCV.js using those tutorials and i remember there was a problem on loading files while not using HTTPS protocol, i solved my problem using IIS Express.
So try using a web server.
Related
im trying to make a js app that tells someone to log in and saves the email and password in a text file, after some googling it looks like js doesn't have access to system files so node is required.
so i searched how to do it, but i keep getting an error that says Uncaught ReferenceError: require is not defined at HTMLButtonElement
this is the JS code:
let email = document.querySelector(".txt");
let password = document.querySelector(".pass");
let log_btn = document.querySelector("button");
log_btn.addEventListener("click", () => {
let mail = email.value;
let pass = password.value;
var fs = require('fs');
let content = `email: ${mail}\n password: ${pass}`;
fs.writeFile("info.txt", content, err => {
if (err) {
console.error(err);
return;
}
console.log("file created");
});
window.location.href = "index2.html"
})
what is preventing this from working, is there something i should include or install or anything.
hope someone has the answer, thanks in advance.
NodeJS is not a thing for browsers, it's a console application (the one outputting white text in black window)
To work with HTML and NodeJS at once, you need to use a mix of NodeJS and Browser, like https://nwjs.io/ or https://www.electronjs.org/
Download NWJS, upzip it, and open the HTML file with nw.exe, then you'll get a browser where you can use require and use filesystem
If the thing you want is making a web page which connects to a server that saves the file that's another thing, see https://adevait.com/nodejs/build-a-crud-app-with-only-json-files for example
1 - If you are trying to write a file on client machine, You can't do this in any cross-browser way. IE does have methods to enable "trusted" applications to use ActiveX objects to read/write file.
2 - If you are trying to save it on your server then simply pass on the text data to your server and execute the file writing code using some server side language.
3 - To store some information on the client side that is considerably small, you can go for cookies.
4 - Using the HTML5 API for Local Storage.
I am trying to learn how to use sql.js from here. https://sql.js.org/#/
I am following there first html example and I keep coming across errors just trying to run this.
I installed sql.js using npm install sql.js
I took the dist folder from the sql.js install and put it into the test folder where the index.html is.
I used there example code and tried open it in a browser but I am faced with: sql-wasm.js:167 Fetch API cannot load file:///C:/dist/sql-wasm.wasm. URL scheme "file" is not supported.
Code:
<meta charset="utf8" />
<html>
<script src='C:\\Users\\Rocko\\Documents\\scripts\\AAOA\\nodetest\\dist\\sql-wasm.js'></script>
<script>
config = {
locateFile: filename => `/dist/${filename}`
}
// The `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
// We must specify this locateFile function if we are loading a wasm file from anywhere other than the current html page's folder.
initSqlJs(config).then(function(SQL){
//Create the database
const db = new SQL.Database();
// Run a query without reading the results
db.run("CREATE TABLE test (col1, col2);");
// Insert two rows: (1,111) and (2,222)
db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);
// Prepare a statement
const stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
stmt.getAsObject({$start:1, $end:1}); // {col1:1, col2:111}
// Bind new values
stmt.bind({$start:1, $end:2});
while(stmt.step()) { //
const row = stmt.getAsObject();
console.log('Here is a row: ' + JSON.stringify(row));
}
});
</script>
<body>
Output is in Javascript console
</body>
</html>
Pictures:
I have been trying to have my test webapp read my sqlite file for about 2 weeks now and I have been trying to follow what people have suggested. This is the latest suggestion and so I am trying to learn this but I can't even get the basic example done.
Any ideas would be appreciated.
Thanks
I had the same error following the same page in the sql.js documentation.
The error is avoided by using sql-asm.js instead of sql-wasm.js. As the document says further down the page: "sql-asm.js The older asm.js version of Sql.js. Slower and larger. Provided for compatibility reasons."
This is preferable for me than spinning up a web server or trying to "encode the wasm as base64" as some other threads suggest (which is way beyond me while just trying to create a simple stand-alone .html page linked to a sqlite file).
You are trying to load the WASM file from a local file, which does not work.
But you can easily just spin up a webserver (by using e.g. NodeJS) on your local machine, and then run your test code from there, so it accesses it using a proper URL instead of a local file on your PC.
I've converted an existing web application (HTML5, JS, CSS, etc.) into a Windows UWP app so that (hopefully) I can distribute it via the Windows Store to Surface Hubs so it can run offline. Everything is working fine, except PDF viewing. If I open a PDF in a new window, the Edge-based browser window simply crashes. If I open an IFRAME and load PDFJS into it, that also crashes. What I'd really like to do is just hand off the PDF to the operating system so the user can view it in whatever PDF viewer they have installed.
I've found some windows-specific Javascript APIs that seem promising, but I cannot get them to work. For example:
Windows.System.Launcher.launchUriAsync(
new Windows.Foundation.Uri(
"file:///"+
Windows.ApplicationModel.Package.current.installedLocation.path
.replace(/\//g,"/")+"/app/"+url)).then(function(success) {
if (!success) {
That generates a file:// URL that I can copy into Edge and it shows the PDF, so I know the URL stuff is right. However, in the application it does nothing.
If I pass an https:// URL into that launchUriAsync function, that works. So it appears that function just doesn't like file:// URLs.
I also tried this:
Windows.ApplicationModel.Package.current.installedLocation.getFileAsync(url).then(
function(file) { Windows.System.Launcher.launchFileAsync(file) })
That didn't work either. Again, no error. It just didn't do anything.
Any ideas of other things I could try?
-- Update --
See the accepted answer. Here is the code I ended up using. (Note that all my files are in a subfolder called "app"):
if (location.href.match(/^ms-appx:/)) {
url = url.replace(/\?.+/, "");
Windows.ApplicationModel.Package.current.installedLocation.getFileAsync(("app/" + url).replace(/\//g,"\\")).then(
function (file) {
var fn = performance.now()+url.replace(/^.+\./, ".");
file.copyAsync(Windows.Storage.ApplicationData.current.temporaryFolder,
fn).then(
function (file2) {
Windows.System.Launcher.launchFileAsync(file2)
})
});
return;
}
Turns out you have to turn the / into \ or it won't find the file. And copyAsync refuses to overwrite, so I just use performance.now to ensure I always use a new file name. (In my application, the source file names of the PDFs are auto-generated anyway.) If you wanted to keep the filename, you'd have to add a bunch of code to check whether it's already there, etc.
LaunchFileAsync is the right API to use here. You can't launch a file directly from the install directory because it is protected. You need to copy it first to a location that is accessible for the other app (e.g. your PDF viewer). Use StorageFile.CopyAsync to make a copy in the desired location.
Official SDK sample: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/AssociationLaunching
I just thought I'd add a variation on this answer, which combines some details from above with this info about saving a blob as a file in a JavaScript app. My case is that I have a BLOB that represents the data for an epub file, and because of the UWP content security policy, it's not possible simply to force a click on a URL created from the BLOB (that "simple" method is explicitly blocked in UWP, even though it works in Edge). Here is the code that worked for me:
// Copy BLOB to downloads folder and launch from there in Edge
// First create an empty file in the folder
Windows.Storage.DownloadsFolder.createFileAsync(filename,
Windows.Storage.CreationCollisionOption.generateUniqueName).then(
function (file) {
// Open the returned dummy file in order to copy the data to it
file.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (output) {
// Get the InputStream stream from the blob object
var input = blob.msDetachStream();
// Copy the stream from the blob to the File stream
Windows.Storage.Streams.RandomAccessStream.copyAsync(input, output).then(
function () {
output.flushAsync().done(function () {
input.close();
output.close();
Windows.System.Launcher.launchFileAsync(file);
});
});
});
});
Note that CreationCollisionOption.generateUniqueName handles the file renaming automatically, so I don't need to fiddle with performance.now() as in the answer above.
Just to add that one of the things that's so difficult about UWP app development, especially in JavaScript, is how hard it is to find coherent information. It took me hours and hours to put the above together from snippets and post replies, following false paths and incomplete MS documentation.
You will want to use the PDF APIs https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/PdfDocument/js
https://github.com/Microsoft/Windows-universal-samples/blob/master/Samples/PdfDocument/js/js/scenario1-render.js
Are you simply just trying to render a PDF file?
I am developing WinJs app and I want to create several files in my app installed location in order to navigate to them locally. When I am trying to create new file I am getting Access denied exception :
"WinRTError: Access is denied"
This is the code which I'm using for file creation:
var folder = Windows.ApplicationModel.Package.current.installedLocation;
folder.createFileAsync("index.html", Windows.Storage.CreationCollisionOption.replaceExisting)
Is there a way to allow this functionality, or is it just blocked for security reasons and there's nothing that you can do about it?
Craeting those files in local folder cause another issue that I want to prevent - that's why I am trying to create them in installed location.
Thanks
You can't do that ! this folder is a read-only.
But ... (if you have to do this)
You can write anithing in the localFolder
Windows.ApplicationModel.Package.current.LocalFolder
And write a lot of code to read this files that you created, to load them dynamically in your app
I am trying to use django-filebrowser. I have installed in correctly according to the instructions, but i get a JS error every time i try to upload a file.
I should note that i am able to browse to 'filebrowser/browse/', create directories etc.
The problem is that when i chose to upload a file, i can see in the html source that a file 'CollapsedFieldsets.js' is included but cannot be found.
The location of this file is supposed to be here: django-install/django/contrib/admin/media/js/admin/ but the file is nowhere to be found.
django-filebrowser references this JS file in filebrowser/templates/upload.html
The error i get is:
invalid object initializer
$('#id_file').uploadify({
That probably happens because the file in question cannot be found.
I am using Django 1.3 and that file is not included in the download.
Please help!
I may have got the same trouble some days ago when I was using django-filebrowser. I can also create the directory, but when I click the 'browse' button, it fails with the same error that you got: 'CollapsedFieldsets.js' can not be found.
at last, I found that:
MEDIA_URL = 'http://domain/static/'
FILEBROWSER_URL_FILEBROWSER_MEDIA =MEDIA_URL+ 'filebrowser/'
because the MEDIA_URL has no 'www', so when I visit my website with no 'www', the filebrowser works well; but if with 'www', I will still get the error.
I am not sure this answer is right, hope it can help you.