Jquery keyup function is very slow. i am outputting the text on image. but the output is very slow.
Following is the html, JS, PHP code that i run. The code is running fine on my side but the problem is that it is very slow almost 5 to 10 seconds to write a letter. Is there any way to speed up the process. Kindly help.
jQuery(document).ready(function(){
//PURE PATH TO IMAGE GENERATING PHP FILE
var base = jQuery(".preview img").attr("src");
//GATHER IMAGE FOR FIRST TIME
jQuery(".preview img").attr("src",base+'?'+jQuery("#realtime-form").serialize());
//KEYUP EVENT AND NEW IMAGE GATHER
jQuery("#realtime-form input,textarea").stop().keyup(function(){
jQuery(".preview img").attr("src",base+'?'+jQuery("#realtime-form").serialize());
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="http://nameonbirthdaycake.com/scripts/client-side.js"></script>
<div id="mainwrapper" class="preview">
<div id="box-1" class="box">
<img class="downloadable" src="http://nameonbirthdaycake.com/scripts/write.php?user_input=Enter+the+Name&postid=7">
</div>
<form id="realtime-form" action="" method="post"><strong>Enter the Name</strong>
<input id="realtime-form" maxlength="12" name="user_input" type="text" value="Enter the Name"/>
</form></div>
<?php
header ('Content-type: image/png');
if(isset($_GET["postid"])){
$post=(int)$_GET["postid"];
if ($post==7){
$userinput = $_GET["user_input"];
$image=imagecreatefrompng(__DIR__ . "/images/bg.png");
$font = __DIR__ . '/fonts/PR8Charade.ttf';
$col1 = imagecolorallocate($image, 129, 125,11);
$text_size1 = 36;
$xposition1 = 245;
$yposition1 = 380;
$angeldirection1 = 50;
imagettftext($image, $text_size1, $angeldirection1, $xposition1, $yposition1, $col1, $font, $userinput);
imagepng($image);
imagedestroy($image);
}
}
?>
Related
How to create a element that uses javascript without reloading the jquery.js?
I've already load it on layout.
every time, I must load it.
This is my element/contacts.ctp
(entire html)
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js">
</script>
<script type="text/javascript" src="js/bootstrap/novo.js">
</script>
<script type="text/javascript">
var id = '1';
$(function(){$(document).on('click', '.btn-add', function(e){
e.preventDefault();
var inpute = '<div class="entradas-'+id+'" hidden></br><select class="form-control" id="tipo." name="abc['+id+'][tipo_id]"><?php foreach($contatotipo as $tipo): ?><option value="<?= $tipo->id; ?>"><?= $tipo->nome; ?></option> <?php endforeach; ?> </select> <input class="form-control" id="contato" placeholder="Preencher" name="abc['+id+'][contato]"> <button class="btn btn-danger btn-remove" id="addcontato" type="button"> <span class="fa fa-minus"></span> </button> </br> </div>';
$(".novas").before(inpute);
$('.entradas-'+id).slideDown('slow');
return id++;
})
.on('click', '.btn-remove', function(e)
{
$(this).closest('div').slideUp();
e.preventDefault();
return false;
});
});
</script>
First, put the custom JavaScript code in a separate file. Then, wrap it inside the $(document).ready() function, like this
$(document).ready(function(){
var id = '1';
$(function(){$(document).on('click', '.btn-add', function(e){
...
}
...
});
This tells jQuery to wait with the code execution until all the elements on the page have been drawn.
Then, load all the scripts in the <head> tag:
<html>
<head>
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap/novo.js"></script>
<script type="text/javascript" src="js/your/custom/path.js">
</head>
Make the header the same for all your pages, and you're good to go.
I am trying t load an image into div tag from a url which is obtained from a textbox.My current file is as follows..I don't know what else to be done
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
Using pure javascript you can load the image as follows. I am using the onChange event to detect whether url has been supplied to the textbox or not. On pressing Enter key, the image will be loaded in the div.
function addImage()
{
var url = document.getElementsByClassName("imageURL1")[0].value;
var image = new Image();
image.src = url;
document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1" onChange="addImage();">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
You can try something like this.
$(document).ready(function(){
$("#Submit").click(function(){
var image_url = $(".imageURL1").val();
$(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
</div>
Js fiddle example -> http://jsfiddle.net/0kvxpnmv/
$('<img src="'+image_url+'">').load(function() {
$(this).appendTo('.ImageContainer');
});
JS Fiddle
Use php
index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>
Now when they click submit it will take you to the new page
GetURL.php
$image_url = $_REQUEST['url'];
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
<?php echo '<img src="{$image}"/>'; ?>
</div>
</body>
</html>
On this page you can see that in your imageContainer class you have the image url being posted with PHP
The best way to handle this from here would be to have the form on the same page as the image and have it post the url with ajax.
So you would type in the url to the textbox and when your done it refreshes the image url.
How about using a button to call a funtion that'll change the image src with url in the text box
HTML
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<button onclick="func()">Load image</button>
<div class="ImageContainer">
<img src="" id="imgContainer">
</div>
</body>
</html>
javascript
(function(){
var func = function(){
var url = $(".imageURL1").val()
$('#imgContainer').attr('src',url)
}
})();
Here's the jsFiddle with jQuery and without jQuery
Please see my code below, on the change event of the text input, it would create an jQuery img tag then add then use the URL from the input as the source and clear the contents of the output div. Once the image is loaded, it will replace the content of the output div.
$('.imageURL1').change(function() {
var $img = $('<img/>');
$img.attr('src', $(this).val());
$img.load(function() {
$('.ImageContainer').html(this);
});
});
This solution requires jQuery.
Working fiddle here.
I want to capture image from webcam user image that image stored in specified folder and captured image path store into mysql using php. I have an problem with webcam captured image path is not stored in mysql database. so please help me...
<script src="webscript.js"></script>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
Webcam.upload( data_uri, 'upload.php', function(code, text) {
alert(data_uri);
});
} );
}
</script>
<?php
include 'connection.php';
// be aware of file / directory permissions on your server
$newname = move_uploaded_file($_FILES['webcam']['tmp_name'], 'uploads/webcam'.date('YmdHis').rand(383,1000).'.jpg');
$query = "INSERT INTO entry(name) VALUES('".$_GET['url']."')";
mysql_query($query)or die(mysql_error());
echo "<script>alert('successfully..');</script>";
?>
<!DOCTYPE html>
<html>
<head>
<title>Javascript Webcam</title>
<link href="font-awesome.min.css" rel="stylesheet"/>
<link href="bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<center>
<div class="row">
<div class="col-md-6">
<h3>Profile Picture</h3>
<div id="my_camera"></div>
<!-- A button for taking snaps -->
<form>
<input type=button class="btn btn-success" value="Take Snapshot" onClick="take_snapshot()">
</form>
<div id="results" class="well">Your captured image will appear here...</div>
</div>
</div>
</center>
</body>
</html>
Assuming $mysqli is a successfully connected [new Mysqli] object.
$query = "SELECT * FROM 'database.table' WHERE 'somecolumn'='someval' LIMIT= 5";
if ($stmt = $mysqli->prepare($query)) {
/* execute statement */
$stmt->execute();
/* bind result variables */
$stmt->bind_result($name, $code);
/* fetch values */
while ($stmt->fetch()) {
printf ("%s (%s)\n", $name, $code);
}
/* close statement */
$stmt->close();
I Have been going through a tutorial on infinite scrolling and have everything exactly the same except my alert is not being triggered and I cannot work out why. Any possible variations of obtaining the scroll positioning in the IF statement would also be helpful.
<?php
require_once("connect.php");
$results = $connect->query("SELECT * FROM images ORDER BY image_name DESC LIMIT 0,2");
$count = $connect->query("SELECT * FROM images");
$nbr = $count->rowCount();
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class='images'>
<?php
while($row = $results->fetch())
{
?>
<p><img src="images/<?php echo $row['image_name'];?>" height="500" width="500"></p>
<?php
}
?>
</div>
<script src='js/jquery.js'></script>
<script>
$(document).ready(function(){
var load = 0;
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height())
{
alert("test");
}
});
});
</script>
</body>
</html>
Found the solution. The correct library needs to be called which many sites do not stipulate. Here is the code that needs to be posted just before the scroll script.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
So I'm trying to automatically update an image source using javascript but for some reason it won't work. The image is being retrieved from my php text generator (generates an image with text on it) the text is grabbed from a input box. I want it to automatically grab the text inside the inputbox then change the src of image to gen.php?text=Input_box_text_goes_here
here is my code:
<html>
<head>
<title>text generator</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<script language=javascript type='text/javascript'>
setInterval(function () {
var str= document.form.letters.value;
$('#logo').src("gen.php?text="+str);
}, 10);
</script>
<img id="logo" name="logo" src="gen.php?text=default" />
<form name="form" action="">
Text: <input type="text" name="letters"/>
</form>
</body>
</html>
any help will be appreciated.
Change $('#logo').src("gen.php?text="+str); to $('#logo').attr("src", "gen.php?text="+str);.
try:
<script>
$(function(){
//reference the image
var img = $('#logo');
//use onkeyup instead of polling
$('input[name="letters"]').on('keyUp',function(){
//get the value every keystroke
var inputValue = $(this).val();
//apply the values to the image source
img.each(function(){
this.src = "gen.php?text="+inputValue;
});
});
});
</script>