Develop Reference

Only tesseract.js can extract the text from an image and other libraries cant

so I came across this weird "issue". I wrote a program in C# and JS to extract the numbers from an image, however only the JS code, which uses the tesseract.js library can successfully get the text. The image given to both programs are identical and they both use the same model. I took the model from the Tesseract.JS GitHub to ensure they were both using the same models. The model can be found here
I presumed that the tesseract.js library may be altering the image in some way, so I looked through the source code and didn't manage to find anything.
Js Library: Tesseract.JS
C# library: Tesseract.Net.SDK
Image I used:
Here is the image I gave each program
C# code:
using var objOcr = OcrApi.Create();
objOcr.SetVariable("tessedit_char_whitelist", "0123456789");
objOcr.Init(Patagames.Ocr.Enums.Languages.English);
Bitmap image= new Bitmap("image.png")
var text = objOcr.GetTextFromImage(image);
JS code:
import Tesseract from 'tesseract.js';
Tesseract.recognize(
'image.png',
'eng',
{ logger: m => console.log(m) }
).then(({ data: { text } }) => {
console.log(text);
})

How to get MathML/Latex code from fMath Editor plugin for TinyMCE?

I need to use TinyMCE editor but I also need to be able to edit mathematical equations and formulas. I added the FMath editor plugin in my TinyMCE installation.
Yes it works and I can add equations but the equations are generated img tags with src containing blob:http url which means, the image exists in browser memory and gets deleted once the browser is closed.
Yes there are couple of tricks how to do something with the blob img tag with AJAX, but the problem is, I want to be able to save my edited text plus math equations in database.
I think the best approach is to save the MathML / Latex representation of the equation in database. The obstacle is, FMath editor has poor documentation, so I am not aware how to get this generated MathML / Latex code.
So how can I do that, is there some FMath function, getMathML() code or so...?
The problem is hot to access the plugin API trough TinyMCE?

I have developed custom plugin solution, please take a look:
https://github.com/Axel186/mathsymbols-tinymce-plugin
It uses MathJax to render the font. It's free and has MIT license.
Take a look at my other plugins, you may be interested to generate some charts or graphs by using math functions.

If you were to check the plugin.min.js for FMath in TinyMCE plugins folder, it loads a html page OnlyEditor.html in the iframe created by TinyMCE. This html page contains getter functions like so:
<script type="text/javascript">
var e1 = $("#editor1").mathEditor({ width: 1000, height: 400 }),
mathml = null;
e1.mathEditor("setSaveCallback", clientSaveMethod);
function clientSaveMethod(){
// get info from editor ex: get image
console.dir(e1.mathEditor("getMathML", "UNICODE", "true"));
}
function getMathML(){
return e1.mathEditor("getMathML", "UNICODE", "true");
}
function getBlobOrUrl(returnFunc){
return e1.mathEditor("getBlobOrUrl", returnFunc, "UNICODE", "true");
}
function setMathML(mathml){
e1.mathEditor("setMathML", mathml);
}
function getImage(){
return e1.mathEditor("getImage","png");
}
function getMathMLToLoad(){
return null;
}
// autoload used in tinyMCE editor - do not delete
if (window.parent !== null && window.parent.getMathMLToLoad !== null) {
mathml = window.parent.getMathMLToLoad();
if (mathml !== null) {
e1.mathEditor("setMathML", mathml);
}
}
</script>
So getMathML() returns the raw MathML in xml format. getImage() returns the blob address/data of the generated image. You can also use setMathML(mathml) to set the FMath editor to load your specific formula.

Keeping javascript minified inside the database

I have written a script that is placed on different websites. It puts some html/css there. I have also written a website that enables to configure this html/css for each website.
That's why the script has to load html/css from the database. And that's why I have to keep javascript inside the database, and then use some eval to fire it from the script.
My question is - how can I keep something like this minified in the database, and then display it nicely formatted in some wysiwyg editor?
Sample text:
var el = document.createElement('body');
el.innerHTML = 'foobar';
document.getElementsByTagName('body')[0].appendChild(el);
This is what I want to get in my wysiwyg editor, but in DB I want this:
var el = document.createElement('body');el.innerHTML = 'foobar';document.getElementsByTagName('body')[0].appendChild(el);
So I have to somehow convert between those two.

I think you can use a regular expressions to do that (if you just want to place all code at the single line into the DB):
To store from the editor to the database do
var codeToDB = WYSIWYG_value.replace(/\r\n|\r|\n/g,"");
To restore from the database
var codeToWYSIWYG = codeFromDB.replace(/;/g,";\n")

node_xslt documentation or examples not available

Hello,
I am new to xml, xsl, but I want to use node_xslt to Transform XML documents.
I have seen the nodejs page for this https://www.npmjs.com/package/node_xslt and https://developer.mozilla.org/en-US/docs/XSLT/PI_Parameters, but it does not contains any example, so can someone provide me some link or examples through which I can understand about this..

Thank you very much , I have got answer of my question,
The Link http://www.tutorialspoint.com/xslt/xslt_syntax.htm is very useful,
I have require to do just the following
var xslt = require('node_xslt');
var document = xslt.readXmlFile('path of xml file');
var stylesheet = xslt.readXsltFile('path of xslt file');
var transformedString = xslt.transform(stylesheet, document, []);
This will give us the HTML by using xml and xslt, can be check by print this..
console.log("transformedString>>>>" + transformedString);

Display images from list of attachments

working with a Lightswitch application and the UI is done in javascript. What I have is a list of attachments, anything from images to pdfs, spreadsheets and regular docs. What I would like to do is separate the images from the rest and wrap them in 'img' tags so they display as images instead of just file attachments.
The postRender function looks like this for my list:
myapp.ViewLesson.LessonAttachments_postRender = function (element, contentItem) {
// Write code here.
var re = /(?:\.([^.]+))?$/;
var ext = re.exec(contentItem.value)[1];
if (ext = "jpg" || "png" || "bmp") {
//wrap each item in '<img>" tags to display them as images
}
};
I tried to filter the extensions by using pieces from this: How to extract extension from filename string in Javascript?
But it's not working

You could consider the approach outlined in this article from the Office Developer folks on MSDN. If you build your app as a Cloud Business App and use SharePoint as your document store, the CBA solution will provide the appropriate file placeholder icon for any content known to SharePoint.
I hope this is useful. :)