Add url as parameter for query using Tesseract OCR - javascript

I am using tesseract ocr and it is working perfectly. But my question is can I run tesseract with a url as parameter.
I am looking to do the following
localhost/test.html/?othersite.com/image/image2.jpg
Some Image url for demo:
1. https://i.imgur.com/leBXjxq.png
2. https://i.imgur.com/7u9LyF6.png
when the results are processed it would then come to a text-area box.
Here's a code :
<html>
<head>
<title>Tesseract-JS Demo</title>
</head>
<body>
<input type="text" id="url" placeholder="Image URL" />
<!--<div id="ocr_results"> </div>-->
<div id="ocr_status"> </div>
<div>
<label>Filed1
<label>
<textarea id="txt" ></textarea>
</div>
</body>
<script src='https://cdn.rawgit.com/naptha/tesseract.js
/1.0.10/dist/tesseract.js'></script>
<script
src="https://cdnjs.cloudflare.com/ajax/
libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function runOCR(url) {
Tesseract.recognize(url)
.then(function(result) {
document.getElementById("txt")
.innerHTML = result.text;
document.getElementById('txt').focus();
}).progress(function(result) {
document.getElementById("ocr_status")
.innerText = result["status"] + " (" +
(result["progress"] * 100) + "%)";
});
}
document.getElementById("url")
.addEventListener("change", function(e) {
var url = document.getElementById("url").value;
runOCR(url);
});
</script>

You can do localhost/test.html?image=https://i.imgur.com/leBXjxq.png
And you can get the image from the URL in JavaScript like so:
const urlParams = new URLSearchParams(window.location.search);
const myImage = urlParams.get('image');
myImage variable will be: "https://i.imgur.com/leBXjxq.png" and then you can pass it to your OCR method.
A sample code will be:
const urlParams = new URLSearchParams(window.location.search);
const myImage = urlParams.get('image');
if (myImage) {
runOCR(myImage);
}
Here is a link with updated code: https://gist.github.com/kolarski/0bc2a3feb02adb1b63016d0d78b3653c

Related

Popup window using input text and onclick button

I'm looking for the solution :
opening the Popup window by inserting a value for example.
if your site is: www.example.com/
by inserting a value as a text let's take ' results ' and clicking on the button show us this Popup page:
www.example.com/results
actually I'm using this Code, but that shows the result in the same page
<!DOCTYPE html>
<html>
<head>
<title>Redirect url in Javascript</title>
</head>
<body>
<input id = "url" type = "text" name = "url"
placeholder = "Enter a url here">
<input type = "submit" name = "button" onclick = "fun()">
<script>
function fun() {
var url= document.getElementById("url").value;
document.write("Redirecting to the url in 3 seconds...");
setTimeout(function(){window.location = url;}, 3000);
}
</script>
</body>
</html>
You will need to window.open(url) with an extra parameter like below.
function fun() {
var url= document.getElementById("url").value;
document.write("Redirecting to the url in 3 seconds...");
var currentUrl = window.location.url;
setTimeout(function(){ window.open(currentUrl+"/"+url, '_blank', 'location=yes,height=500,width=1000,scrollbars=yes,status=yes')}, 3000);
}
Third Param describe how your new window would look like.(For ex. it's height and width)
For more info Read Article
Search for Window features in Article.
you should use
window.open(url)
and you can use `` or "" with + to create the url that you want
two issues with your code:
1) you need to include https:// in the url
2) on js fiddle and stackoverflow you can only test their domain
so if you enter www.stackoverflow.com you'll see that the code below works as intended
<!DOCTYPE html>
<html>
<head>
<title>Redirect url in Javascript</title>
</head>
<body>
<input id = "url" type = "text" name = "url"
placeholder = "Enter a url here">
<input type = "submit" name = "button" onclick = "fun()">
<script>
function fun() {
var url= document.getElementById("url").value;
document.write("Redirecting to the url in 3 seconds...");
setTimeout(function(){window.location = "https://" + url;}, 3000);
}
</script>
</body>
</html>

have to encode by HTML link with base64

It is my first post and hope it won't be already solved previously.
I'm using a call center software and also using Salesforce lightning.
When a caller calls, I would like to check in my CRM if it is a customer or not.
It was possible easily with the basic version of Salesforce but is not anymore because the link is coded with base64.
Please, read this post for more explanation : https://tomsmalara.blogspot.com/2019/01/create-lightning-component-that.html
So, I have to create a HTML page for collecting the caller phone number and compose + encrypt the Salesforce link and open the link encrypted.
<!DOCTYPE html>
<html>
<head>
<title>Waiting a call ...</title>
<style>
body {text-align: center;}
</style>
</head>
<body>
<form name="form1" onsubmit="event.preventDefault();return displayResult();">
<label for="name">Phone number:</label>
<input type="text" id="PhoneNumber" name="PhoneNumber" size="10">
<div id="myEncoding"></div>
</form>
<script>
function b64EncodeUnicode(PhoneNumber) {
// first we use encodeURIComponent to get percent-encoded UTF-8,
// then we convert the percent encodings into raw bytes which
// can be fed into btoa.
var Mytxt = '{"componentDef":"forceSearch:search","attributes":{"term":"'+PhoneNumber+'","scopeMap":{"resultsCmp":"forceSearch:resultsTopResults","label":"Top Results","type":"TOP_RESULTS","cacheable":"Y","id":"TOP_RESULTS","labelPlural":"Top Results"},"context":{"disableSpellCorrection":false,"SEARCH_ACTIVITY":{"term":1234567890}}},"state":{}}';
return btoa(encodeURIComponent(Mytxt).replace(/%([0-9A-F]{2})/g,
function toSolidBytes(match, p1) {
var MyResult = String.fromCharCode('0x' + p1);
return MyResult;
}));
}
function displayResult() {
var result = b64EncodeUnicode(PhoneNumber);
document.getElementById('myEncoding').innerHTML = result;
return false;
window.open("https://mycompany.lightning.force.com/one/one.app#" +result,,,true)
}
</script>
</body>
</html>
Something is wrong and tried different things without result.
I will really appreciate if someone can find what is wrong and explain it to me
Thank you in advance
PLease find the solution I found to remove the input steps ...
<!DOCTYPE html>
<html>
<head>
<title>Waiting a call ...</title>
<style>
body {text-align: center;}
</style>
</head>
<body onload=acceptParam()>
Waiting a call ...
<script>
function acceptParam(){
var hashParams = window.location.href.substr(1).split('?'); // substr(1) to remove the `#`
hashParams = hashParams[1].split('&');
var p = hashParams[0].split('=');
//document.getElementById('PhoneNumber').value = p[1] // Pour info
var stringToEncode = '{"componentDef":"forceSearch:searchPage","attributes":{"term":"'+p[1]+'","scopeMap":{"type":"TOP_RESULTS"},"context":{"disableSpellCorrection":false,"disableIntentQuery":false,"permsAndPrefs":{"SearchUi.searchUIPilotFeatureEnabled":false,"SearchExperience.LeftNavEnhancementEnabled":true,"Search.crossObjectsAutoSuggestEnabled":true,"SearchResultsLVM.lvmEnabledForSearchResultsOn":true,"MySearch.userCanHaveMySearchBestResult":false,"SearchResultsLVM.lvmEnabledForTopResults":false,"OrgPermissions.UnionAppNavSmartScope":false,"SearchUi.feedbackComponentEnabled":false,"SearchExperience.TopResultsSingleSOSLEnabled":false,"OrgPreferences.ChatterEnabled":true,"Search.maskSearchInfoInLogs":false,"SearchUi.orgHasAccessToSearchTermHistory":false,"SearchUi.searchUIInteractionLoggingEnabled":false,"MySearch.userCanHaveMySearch":false},"searchDialogSessionId":"bdded2dc-91d1-3b3e-11d7-ff339bce1727","searchSource":"INPUT_DESKTOP"},"groupId":"DEFAULT"},"state":{}}'
var encoded = window.btoa(stringToEncode);
//var output = "Encoded String : " + encoded;
//document.getElementById("myEncoding").innerHTML = "Original String: " + p[1] + "<br>" + output;
window.location.assign("https://mycompany.lightning.force.com/lightning/one/one.app?source=alohaHeader#"+encoded);
}
</script>
</body>
</html>
PLease, can you say me what do you think about it ? Maybe we can be more efficient ?

Why is this alert box not popping up when button clicked?

I've been writing a script to check for reflective XSS vulnerabilities. So far, it has an input for a URL with * in place of queries and an error checker for malformed URLs. It also has a file uploader for users to upload "payloads". However, I recently made a part that replaces * with the contents of the payload, and then for debugging purposes, I made it alert() the variable with the file contents. However, its not working. Here's my code:
function selectPayload(y) {
var fr = new FileReader();
fr.readAsText(document.getElementById('file').files[0]);
fr.onload = function() {
var dir = fr.result;
var payload = y.replace("*", fr.result);
alert(payload);
};
}
function myFunction() {
var errors = [];
var x = document.getElementById("myText").value;
if (!x.includes("http://") && !x.includes("https://")) {
errors.push('missing HTTP or HTTPS in URL');
}
if (!x.includes("*")) {
errors.push('missing * in place of query')
}
// Renders errors
if (errors.length) {
x = 'Error: ' + errors.join(', ') + '!';
}
document.getElementById("demo").innerHTML = x;
selectPayload(x);
}
<!DOCTYPE html>
<html>
<head>
<title>Slingshot.XSS</title>
</head>
<body style="font-family:monospace;" align="center">
<h2>Slingshot.XSS</h2>
<h3>Slingshot.XSS is a script that launches pre-loaded XSS payloads at a target to test its vulnerabilities.</h3>
<h4>Please report all issues to
or contact me at email#example.com.</h4>
Source Code / Learn More
<br />
<h4>Enter a URL with <b>*</b> in the place of query.</h4>
<h5>Example: <code>https://www.google.com/#q=*</code></h5>
<input type="text" id="myText" placeholder="Enter a URL"> <button onclick="myFunction()">Submit</button>
<p id="demo">No Submitted URL</p>
<h4>Select a payload:</h4>
<h5>Default payloads in <code>payloads</code></h5>
<input type="file" id="file"> <button onclick="selectPayload()">Submit</button>
</body>
</html>
What am I doing wrong?
You have the second button calling the wrong function. Changed to call myFunction() instead of selectPayload(). Unless you intended to call selectPayload() with the second button, in which case you neet to pass it an argument like it expects.
function selectPayload(y) {
var fr = new FileReader();
fr.readAsText(document.getElementById('file').files[0]);
fr.onload = function() {
var dir = fr.result;
var payload = y.replace("*", fr.result);
alert(payload);
};
}
function myFunction() {
var errors = [];
var x = document.getElementById("myText").value;
if (!x.includes("http://") && !x.includes("https://")) {
errors.push('missing HTTP or HTTPS in URL');
}
if (!x.includes("*")) {
errors.push('missing * in place of query')
}
// Renders errors
if (errors.length) {
x = 'Error: ' + errors.join(', ') + '!';
}
document.getElementById("demo").innerHTML = x;
selectPayload(x);
}
<!DOCTYPE html>
<html>
<head>
<title>Slingshot.XSS</title>
</head>
<body style="font-family:monospace;" align="center">
<h2>Slingshot.XSS</h2>
<h3>Slingshot.XSS is a script that launches pre-loaded XSS payloads at a target to test its vulnerabilities.</h3>
<h4>Please report all issues to
or contact me at keeganjkuhn#gmail.com.</h4>
Source Code / Learn More
<br />
<h4>Enter a URL with <b>*</b> in the place of query.</h4>
<h5>Example: <code>https://www.google.com/#q=*</code></h5>
<input type="text" id="myText" placeholder="Enter a URL"> <button onclick="myFunction()">Submit</button>
<p id="demo">No Submitted URL</p>
<h4>Select a payload:</h4>
<h5>Default payloads in <code>payloads</code></h5>
<input type="file" id="file"> <button onclick="myFunction()">Submit</button>
</body>
</html>
Here: I've found code that will work:
<!DOCTYPE html>
<html>
<head>
<title>Slingshot.XSS</title>
</head>
<body style="font-family:monospace;" align="center">
<script>
function selectPayload() {
var x = document.getElementById("myText").value;
var fr = new FileReader();
fr.readAsText(document.getElementById('file').files[0]);
fr.onload = function() {
var dir = fr.result;
var payload = x.replace("*", fr.result);
alert(payload);
};
}
function myFunction() {
var errors = [];
var x = document.getElementById("myText").value;
if (!x.includes("http://") && !x.includes("https://")) {
errors.push('missing HTTP or HTTPS in URL');
}
if (!x.includes("*")) {
errors.push('missing * in place of query')
}
// Renders errors
if (errors.length) {
x = 'Error: ' + errors.join(', ') + '!';
}
document.getElementById("demo").innerHTML = x;
}
</script>
<h2>Slingshot.XSS</h2>
<h3>Slingshot.XSS is a script that launches pre-loaded XSS payloads at a target to test its vulnerabilities.</h3>
<h4>Please report all issues to
or contact me at keeganjkuhn#gmail.com.</h4>
Source Code / Learn More
<br />
<h4>Enter a URL with <b>*</b> in the place of query.</h4>
<h5>Example: <code>https://www.google.com/#q=*</code></h5>
<input type="text" id="myText" placeholder="Enter a URL"> <button onclick="myFunction()">Submit</button>
<p id="demo">No Submitted URL</p>
<h4>Select a payload:</h4>
<h5>Default payloads in <code>payloads</code></h5>
<input type="file" id="file"> <button onclick="selectPayload()">Submit</button>
</body>
</html>

use Ajax and JavaScript to create dynamic links from the results

HTML contains two div make different ajax calls to both the divs,where div1 is the result of html form and div2 should be the result of onclick on div1
html
<html lang="en">
<head>
<title>Display Movie Information</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="movies.js"></script>
</head>
<body onload="initialize();">
<tr><td>
<form>
<label>Movie title: <input type="text" id="form-input"/></label>
<input type="button" onclick="sendRequest();" value="Display Info"/>
</form>
<div id="output"> </div></td>
<td><div id="right_panel">Display Dynamic results here</div></td>
</body>
</html>
I have a movies.js file which using ajax gets the result
function initialize () {
}
function sendRequest () {
var xhr = new XMLHttpRequest();
var query = encodeURI(document.getElementById("form-input").value);
xhr.open("GET", "proxy.php?method=/3/search/movie&query=" + query);
xhr.setRequestHeader("Accept","application/json");
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
var json = JSON.parse(this.responseText);
var str = JSON.stringify(json,undefined,2);
//customized code
console.log(json.results.length);
var i=0;
var movie_title,release_date;
var movies = new Array();
while(i<json.results.length)
{
movie_title = json.results[i].title;
release_date = json.results[i].release_date;
movies[i] = "<li>"+movie_title+"<br/>"+release_date+"<br/></li>";
i++;
}
document.getElementById("output").innerHTML = "<ul>" + movies + " </ul>";
}
};
var movie_detail = new XMLHttpRequest();
var movie_credit = new XMLHttpRequest();
xhr.send(null);
}
This code displays the title and the release date of the movies(result of onclick on the button)
Q: I want to make the movie title an hyperlink that could make a call like www.imdb.com/(movie_title) and display the result in the second div tag named "right_panel" using only ajax and javascript and no jquery.

simple xml editor using javascript and msxml

whether there is an example of such an implementation?
howto load/save context of msxml to/from edit or text control?
<html><head>
<script language="JavaScript">
function loadxml()
{
var fileName = document.getElementById("fileName");
var xmlData = new ActiveXObject("Msxml2.DOMDocument");
xmlData.load(fileName.value);
var editor = document.getElementById("editor");
editor.value = xmlData; // got [object]
}
function testxml()
{
var editor = document.getElementById("editor");
// editor.value load by msxml
}
</script>
</head>
<body>
<input type="file" id="fileName"/>
<input type="button" value="Load" onclick="loadxml();"/>
<input type="button" value="Test" onclick="testxml();"/><br>
<textarea id="editor" rows="25" cols="50">no data</textarea>
</body>
</html>
editor.value = xmlData.xml
And vice-versa only use loadXML instead of load method on ActiveX object
var xmlData = new ActiveXObject("Msxml2.DOMDocument");
xmlData.loadXML( editor.value );
see for ex. http://joncom.be/code/javascript-xml-conversion/
PS Originally misunderstood question, so there are irrelevant comments now

Categories