I want to recognize English text from the cat image. This is my source code. The output text is as follows. How to improve the recognition rate, making the string Vou will be converted to the string You, the string advrce will be converted to string advice.
<html>
<head>
<script src="https://cdn.rawgit.com/naptha/tesseract.js/0.2.0/dist/tesseract.js">
</script>
</head>
<body>
<input type="text" id="url" placeholder="Image URL" />
<input type="button" id="go_button" value="Run" />
<div id="ocr_results"> </div>
<div id="ocr_status"> </div>
<script>
function runOCR(url) {
Tesseract.recognize(url,{lang:'eng'})
.then(function(result) {
document.getElementById("ocr_results")
.innerText = result.text;
}).progress(function(result) {
document.getElementById("ocr_status")
.innerText = result["status"] + " (" +
(result["progress"] * 100) + "%)";
});
}
document.getElementById("go_button")
.addEventListener("click", function(e) {
var url = document.getElementById("url").value;
runOCR(url);
});
</script>
</body>
</html>
Related
The problem is solved no need to go thorough the post thanks for the help the useful time is appreciated.
you are referencing this DOM object (<span id = "res"></span>) itself but you don't want this object but the text which is stored inside.
You would get this value with a simple
document.getElementById("res").innerText
That's more or less the same call you are using to set the text of this res object.
So a working example could look like this
<!DOCTYPE html>
<html>
<head>
<title> Exercise 2 </title>
</head>
<body>
<form>
Enter the value to be converted <br><br> <input type="numbers" id="val" /> <br><br>
<input type="button" onClick="celtofar()" Value="Celcius to Fahrenhet" id="b1" /><br><br>
<input type="button" onClick="fartocel()" Value="Fahrenhet to Celcius" id="b2"/><br><br>
Output : <br>
<span id = "res"></span>
<p id= "op"></p>
</form>
<style type="text/css">
body { margin-left: 450px; margin-top: 100px}
</style>
<script type="text/javascript">
function celtofar()
{
v = document.getElementById("val").value;
document.getElementById("res").innerHTML = (v * 1.8) + 32;
var message = v +'\xB0C is ' + document.getElementById("res").innerText + '\xB0F.';
document.getElementById("op").innerHTML = message;
}
function fartocel()
{
v = document.getElementById("val").value;
document.getElementById("res").innerHTML = (v - 32) / 1.8;
var message = v +'\xB0F is ' + document.getElementById("res").innerText + '\xB0C.';
document.getElementById("op").innerHTML = message;
}
</script>
</body>
</html>
Read more about this here:
https://www.w3schools.com/js/js_htmldom.asp
you just need to close the span after the <p></p> tag. Just put the closing </span> after the </p>
<span id = "res">
<p id= "op"></p></span>
I have this code.
<script src="http://nerdamer.com/js/nerdamer.core.js"></script>
<script src="http://nerdamer.com/js/Algebra.js"></script>
<script src="http://nerdamer.com/js/Calculus.js"></script>
<div id="text"></div>
<form name="formulario" onsubmit="return procesar(this);">
Ingrese la funcion:
<input name="func" type="text" size="15" />
<input type="submit" value="Procesar" />
</form>
JavaScript Code:
//Calculo de derivada
var func = document.getElementsByName("func")[0].value;
var result = nerdamer('diff(2x^3+3x^2)').evaluate();
document.getElementById('text').innerHTML += '<p>'+result.text()+'</p>';
I need that when I introduce manually the function, on input, when I click on ''Procesar'' calculate derivate. Thank you, I dont know how... need help.
I mean, save the value pass to the function and show result.
I don't know that library, but it seems you can differentiate an expression expr with
nerdamer.getCore().Calculus.diff(nerdamer(expr).symbol).text()
It's a bit long, but safer than nerdamer("diff(" + expr + ")") in case expr is malformed.
Then, you can use
document.forms.formulario.addEventListener('submit', function(e) {
e.preventDefault(); // Don't send form
var expr = this.elements.func.value,
diff = nerdamer.getCore().Calculus.diff(nerdamer(expr).symbol).text();
document.getElementById('text').textContent = diff;
});
<script src="http://nerdamer.com/js/nerdamer.core.js"></script>
<script src="http://nerdamer.com/js/Algebra.js"></script>
<script src="http://nerdamer.com/js/Calculus.js"></script>
<form name="formulario">
Enter function:
<input name="func" type="text" size="15" />
<input type="submit" value="Differentiate" />
</form>
<div id="text"></div>
You have to create procesar function :
function procesar(_this){
//Calculo de derivada
var func = document.getElementsByName("func")[0].value;
var result = nerdamer('diff(2x^3+3x^2)').evaluate();
document.getElementById('text').innerHTML += '<p>'+result.text()+'</p>';
return false; //Prevent the refresh
}
Hope this helps.
This shows derivative:
function Differentiate(sender) {
var func = document.getElementsByName("func")[0].value.trim();
var result = nerdamer('diff(' + func + ')').evaluate();
var html = document.getElementById('text').innerHTML;
html = '<p>' + result.text() + '</p>' + html;
document.getElementById('text').innerHTML = html;
}
<script src="http://nerdamer.com/js/nerdamer.core.js"></script>
<script src="http://nerdamer.com/js/Algebra.js"></script>
<script src="http://nerdamer.com/js/Calculus.js"></script>
<form name="formulario" method="get" onsubmit="return Differentiate(this);">
Ingrese la funcion:
<input name="func" type="text" size="15" />
<input type="submit" value="Differentiate" />
</form>
<div id="text"></div>
Unfortunately I am unable to comment under the accepted answer but would like to make a slight modification to it which should achieve the same result. Also keep in mind that if your function contains more than one variable then you need to specify with respect to which variable you're differentiating.
document.forms.formulario.addEventListener('submit', function(e) {
e.preventDefault(); // Don't send form
var value = this.elements.func.value,
deriv = nerdamer('diff('+value+')').text();
document.getElementById('text').textContent = deriv;
});
<script src="http://nerdamer.com/js/nerdamer.core.js"></script>
<script src="http://nerdamer.com/js/Algebra.js"></script>
<script src="http://nerdamer.com/js/Calculus.js"></script>
<form name="formulario">
Ingrese la funcion:
<input name="func" type="text" size="15" />
<input type="submit" value="Procesar" />
</form>
<div id="text"></div>
I am trying to build a simple page that allows someone to enter the tags they want and then select either to search for photos that contain all or any of the tags. I have referenced the flickr api page and know this should be accomplished through the "tag_mode" in the url. However this seems to return the same result regardless of what value i put in.
$(document).dblclick(function(e) {
e.preventDefault();
var str = $('input:text').val();
var topic = str.split(" ");
var selected = $('input[name=andOr]:checked', '#form').val();
var ajaxURL = "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + topic + "&tag_mode=" + selected + "&format=json&jsoncallback=?";
$.getJSON(ajaxURL, function(data) {
$('h2').text(data.title);
$.each(data.items, function(i, photo) {
var photoHTML = '<span class="image">';
photoHTML += '<a href="' + photo.link + '">';
photoHTML += '<img src="' + photo.media.m.replace('_m', '_m') + '"></a>';
$('#photos').append(photoHTML);
}); // end each
}); // end get JSON
$("form").hide();
});
<html>
<head>
<meta charset="UTF-8" />
<title>Flickr Popular Public Group Feed</title>
<link rel="stylesheet" type="text/css" href="css/c12.css" />
</head>
<body>
<div id="form">
<form>
<h1>query flickr for recent uploads of your choice!</h1>
<p>please enter the flickr tags you'd like to use in the search</p>
<input type="text" name="tags" />
<p>Please indicate the use of all tags or any tags; for and or or query</p>
<input type="radio" name="andOr" value="'all'" />all tags
<br />
<input type="radio" name="andOr" value="'any'" />any tags
<h1>click anywhere on the page to bring the pictures!</h1>
</form>
</div>
<div id="demo"></div>
<div id="pictures">
<div class="content">
<div id="photos"></div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/myjs.js"></script>
</body>
</html>
The Flickr API lists the query string parameter name as "tag_mode", but in other references it is "tagmode". One works and the other does nothing, as demonstrated by the links below. In addition, OP's code incorrectly adds quotes around the tagmode value which causes it not to work.
ALL TAGS:
http://api.flickr.com/services/feeds/photos_public.gne?tags=elephant,jet,flower&tagmode=all&format=json
ANY TAG:
http://api.flickr.com/services/feeds/photos_public.gne?tags=elephant,jet,flower&tagmode=any&format=json
A very simple example to demostrate that it works.
<html>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
<h3>Demo: Search Flickr images</h3>
Keywords: <input type="text" id="tags" value="flower elephant jet">
All: <input type="checkbox" id="tagmode" >
<button onClick="search();">Search</button>
<xmp id="stdout"></xmp>
<script type="text/javascript">
var script, url;
function search() {
url = '//api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=callback';
url += '&tags=' + (document.getElementById('tags').value || '').replace(/\s/g,',');
url += '&tagmode=' + ( document.getElementById('tagmode').checked ? 'all' : 'any' );
script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
document.body.appendChild( script );
}
function callback(data) {
document.getElementById('stdout').innerHTML = 'URL: ' + url + '\n' + JSON.stringify( data, null, '\t' );
}
</script>
</body>
</html>
I'm working on this project where I need to have the value of a textarea change when one of the input values in the same form changes.
HTML:
<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add" name="product1" />
<input type="text" class="add" name="product2" />
<input type="text" class="add" name="product3" />
<input type="text" class="add" name="product4" />
</form>
The customer is allowed to change the input.class.
The textarea-value should change whenever one of the inputs changes.
The textarea should show something like:
3 x product1
1 x product3
4 x product4
Anybody got an idea?
Thanks in advance,
Joel
<textarea readonly class="overview" id="mytxtarea"></textarea>
$("#product1").blur(function(){
if($("#product1").val()!='')
{
$("#mytxtarea").val('test value');
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form .add').on('keyup', function(){
console.log('test');
var string1 = $('#form .product1').val() + ' x product1\n';
var string2 = $('#form .product2').val() + ' x product2\n';
var string3 = $('#form .product3').val() + ' x product3\n';
var string4 = $('#form .product4').val() + ' x product4';
$('#form textarea').val(string1 + string2 + string3 + string4);
});
});
</script>
</head>
<body>
<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add product1" name="product1" />
<input type="text" class="add product2" name="product2" />
<input type="text" class="add product3" name="product3" />
<input type="text" class="add product4" name="product4" />
</form>
</body>
</html>
$(".add").keyup(function () {
var app=""
$(".add").each(function () {
if( $(this).val() ) {
var value=$(this).val();
var name=$(this).attr('name');
app +=value+"*"+name+ "\n" ;
}
});
$(".overview").text(app);
});
Watch this.
Hope this will give you some solution.
This will do what you want...
$("input.add").keyup(function() {
var msg = "";
$("input.add").each( function() {
if( $(this).val() ) {
msg += $(this).val() + "x " + $(this).attr("name") + "\n";
}
});
$("textarea.overview").text(msg)
});
I used this with your HTML here: http://jsfiddle.net/XYXpp/
$('input').keyup(function () {
var inputedValue = $(this).val();
var name = $(this).attr('name');
$(".overview").text(inputedValue+name);
});
var fd = new FormData()
fd.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value)
fd.append('field_name', $("input[name='field_name']").serialize())
will return
['field_name=9&field_name=15&field_name=10']
you will then have to parse the info in your view
This is the javascript & html code i have.
function convertinput() {
document.getElementById('first').value
var string = document.getElementById('first').value
var newString = "##[0:1: " + string + "]]"
document.getElementById('output').value = newString
}
<input id="first"></input>
<br>
<input id="output"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
the code editor in jsfiddle is http://jsfiddle.net/FEC7S/3/
I want this code to be displayed in my blog post as it is here
http://www.trickiezone.com/2012/10/facebook-blue-text-generator-by.html
If i embed it in my blog through jsfiddle or tinkerbin, the whole web page is getting displayed.
I need only the result to be displayed in my blog post.
How to do so ?
i have added the working demo in my blog:
signed by miliodiguine
TO DO:
1)Login to your blog.
2)Add New Post
3)paste this code
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<script language="javascript" type="text/javascript">
function convertinput() {
document.getElementById('first').value
var string = document.getElementById('first').value
var newString = "##[0:1: " + string + "]]"
document.getElementById('output').value = newString
}
</script>
<input id="first"></input>
<br>
<input id="output"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
</div>
You could use your id to set the display property in css...
function convertinput() {
document.getElementById('output').value = "##[0:1: " + document.getElementById('first').value + "]]";
document.getElementById('output').style.display = 'block';
}
<input id="first"></input>
<br>
<input id="output" style="display:none;"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
http://jsfiddle.net/FEC7S/7/