I have this code to capture an image from the webcam, and I need to store it in a directory on my laptop.
<!DOCTYPE html>
<html>
<head>
<title>Capture webcam image with php and jquery - ItSolutionStuff.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<style type="text/css">
#results { padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Capture webcam image with php and jquery - ItSolutionStuff.com</h1>
<form method="POST" action="storeImage.php">
<div class="row">
<div class="col-md-6">
<div id="my_camera"></div>
<br/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="hidden" name="image" class="image-tag">
</div>
<div class="col-md-6">
<div id="results">Your captured image will appear here...</div>
</div>
<div class="col-md-12 text-center">
<br/>
<button class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 490,
height: 390,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
function take_snapshot() {
Webcam.snap( function(data_uri) {
$(".image-tag").val(data_uri);
document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
} );
}
</script>
</body>
</html>
This is the index.php file, and the next one is the php file to save image.
<?php
$img = $_POST['image'];
$folderPath = "upload/";
$image_parts = explode(";base64,", $img);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$fileName = uniqid() . '.png';
$file = $folderPath . $fileName;
file_put_contents($file, $image_base64);
print_r($fileName);
?>
I have also created the 'upload' folder, but the image is still not getting saved.
I've made a folder names 'webcam' on my desktop, inside that folder are these two files, and the other folder named 'upload'.
How do i get the image to save in that folder?
Related
I have been able to implement the same UI Logic for the Web App I found on this URL, and now I am stuck on the Backend Logic that generated the Merged images (i.e the Cropped Image and the placeholder image as seen on the page) and Renders it to the DOM.
As it is right now, my AJAX never resolves with the success callback, instead, it always resolves with the error callback and I have no clue what I am doing wrong, please?
How can I achieve exactly the same backend logic has seen from the web app in this URL:
https://rhapsodyofrealities.org/rhapathon/?
Using PHP, this is what I have so far for the Backend Logic.
Problem with this method is, it tries to output the image directly to the page:
$targetDir = "uploads/";
$fileName = $targetDir.'complete_'.time().".png";
if(isset($_POST['image'])) {
$placeholder = './rhapathon.jpeg';
$src = $_POST['image'];
list($width, $height) = getimagesize($src);
// $placeholder = imagecreatefromstring(file_get_contents($placeholder));
$placeholder = imagecreatefromjpeg($placeholder);
// $src = imagecreatefromstring(file_get_contents($src));
$src = imagecreatefrompng($src);
imagecopy($placeholder, $src, 200, 200, 0, 0, 300, 300);
header('Content-Type: image/png');
// $imgobj = array("img" => imagepng($placeholder, $fileName));
// $result = json_encode($imgobj);
// echo $result;
imagepng($placeholder);
// Free Memory
imagedestroy($placeholder);
imagedestroy($src);
}
?>
My HTML with the Entire UI and Client Logic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name=description content="Christ Embassy Kubwa Church">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Good Miracle Friday Crusade Flyer Generator</title>
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-reboot.min.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-grid.min.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css"> -->
<link rel="stylesheet" type="text/css" href="./node_modules/croppie/croppie.css">
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<!-- Header -->
<header class="container-fluid p-0 text-center rounded-0 m-0 mb-5">
<div class="jumbotron p-2 bg-info rounded-0 m-0">
<h1 class="font-weight-lighter display-5 text-white">GOOD MIRACLE FRIDAY CRUSADE</h1>
</div>
</header>
<!-- /Header -->
<div class="container">
<!-- Card -->
<div class="card mx-auto rounded-top rounded-bottom" style="overflow: hidden;">
<!-- Card-Head -->
<div class="card-heading bg-dark text-white p-2 lead font-weight-light">Create Avatar</div>
<!-- /card-Head -->
<!-- Card-Body -->
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo" style="width:350px"></div>
</div>
<!-- Col -->
<div class="col-md-4" style="padding-top:30px;">
<div class="mt-0 mb-5">
<strong>STEP 1 : Select Image and adjust to fit</strong>
<input type="file" id="upload" name="fileToUpload">
</div>
<div class="mt-0 mb-5">
<strong>STEP 2 : Upload Image and Download</strong>
<br>
<button class="btn btn-info upload-result">Upload Image</button>
</div>
</div>
<!-- /Col -->
<!-- Col -->
<div class="col-md-4">
<div id="upload-demo-i" style="background:url('./rhapathon.jpeg'); background-size: 300px 300px; width:300px;height:300px;margin-top:30px">
</div>
</div>
<!-- /Col -->
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script> -->
<script src="./node_modules/croppie/croppie.js"></script>
<!-- <script src="./node_modules/html2canvas/dist/html2canvas.min.js"></script> -->
<!-- <script src="./node_modules/canvas2image/canvas2image.js"></script> -->
<script src="./index.js"></script>
<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
enableOrientation: true,
viewport: {
width: 300,
height: 300,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
console.log('Uploading image');
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport',
}).then(function (resp) {
$.ajax({
url: "upload.php",
type: "POST",
data: {"image":resp},
dataType:'JSON',
success: function (data) {
console.log('response ='+data.img);
// html = '<img src="' + resp + '" />';
// $("#upload-demo-i").html(html);
html = '<img width="300px" src="' + data.img + '" /><button style="margin-top:20px; margin-bottom:100px" class="btn btn-danger upload-result">Download Avatar</button> <button style="margin-top:-50px; margin-bottom:100px" class="btn btn-info upload-result">Proceed to Rhapsody Official Website</button>';
$("#upload-demo-i").html(html);
},
error: function (err) {
console.error('Error occured: ', err);
}
});
});
});
// Remove alt attribute from image
window.onload = () => {
document.querySelector('.cr-image').removeAttribute("alt");
document.querySelector('.cr-slider').value="0";
document.querySelector('.cr-slider').focus();
};
</script>
</body>
</html>
after save image file add this lines:
$image_file = fopen($fileName, 'r');
$image_data = fread($image_file, filesize($fileName));
header("Content-type: application/json");
echo json_encode(['img' -> 'data:image/jpeg;base64,' . base64_encode($image_data) );
And if you have problem with merge images look at : Merge two PNG images with PHP GD library
This question already has an answer here:
Show a progress bar for downloading files using XHR2/AJAX
(1 answer)
Closed 3 years ago.
I need help about this code. So I've wrote this code and now I need add progressbar and show downloaded file link after downloaded file to server...
And how I can add it to this code?
Thanks!
<html>
<p style="width: 70%;margin: auto;margin-top: 5%;font-size:larger;text-align:center">
Download Any Files From Any URL</p>
<form method="post" style="width: 70%;margin: auto;margin-top: 10%;">
<input name="url" size="50" placeholder="Please Enter Valid URL>>>" style="width: 100%;height: 10%;font-size: 1.5em;padding:10px" required>
<input name="submit" type="submit" value="Start Download" style="width: 30%;height: 10%;margin: 5% auto; display: block;">
<p style="width: 70%;margin: auto;margin-top: 10%;font-size:larger;text-align:center">
Your File Downloaded To <?php echo getcwd(); ?> Server</p>
<p style="width: 70%;margin: auto;font-size: smaller;text-align: center;position: fixed;bottom: 0;background: #fff;">
Powered by: Developers</p>
</form>
<?php
// maximum execution time in seconds
// set_time_limit (24 * 60 * 60);
if (!isset($_POST['submit'])) die();
// folder to save downloaded files to. must end with slash
$destination_folder = '';
$url = $_POST['url'];
$newfname = $destination_folder . basename($url);
/* // old script
$file = fopen ($url, "rb");
if ($file) { $newf = fopen ($newfname, "wb");
if ($newf)
while(!feof($file)) { fwrite($newf, fread($file, 1024 * 8 ), 1024 * 8 ); }
}
if ($file) { fclose($file); }
if ($newf) { fclose($newf); }
*/
file_put_contents( $newfname, fopen($url, 'r'));
?>
</html>
I need add progress bar and show link after files completed.
w3 schools has a great example of a progress bar using bootstrap:
try this code in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Animated Progress Bar</h2>
<p>The .active class animates the progress bar:</p>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
</div>
</body>
</html>
the idea is that you change the aria-valuenow value as the download progresses. This would be done by using information from php about the percentage of the file that has been downloaded, and modifying that aria-valuenow to reflect the progress.
I have designed a web site which takes image as input and by using ajax I have displayed the image.It was working fine locally but when I uploaded it into the server the image is not shown. The process that takes place is: 1)User uploads an image 2)The image is stored in a temporary folder by default 3)The image that is stored in the temporary folder is moved to a folder upload 4) The image is displayed in a div. I checked the path but it seems okay for me. I will post the code for review:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="MainStyleSheet.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="html5slider.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#file').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="images/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
</script>
<script type="text/javascript">
function myfunction()
{
$("#display").html('');
$("#display").html('<img src="images/loader.gif" alt="Uploading...."/>');
$("#retrieveimageform").ajaxForm(
{
target: '#display'
}).submit();
$("#tagsform").ajaxForm(
{
target: '#tags'
}).submit();
};
</script>
<title></title>
</head>
<body>
<div id="maindiv">
<div id="banner">
<?php
include 'Header.php';
?>
</div>
<div id="wrapper">
<div id="imageupload">
<form action="uploadimage.php" method="post"
enctype="multipart/form-data" id="imageform">
<label for="file">Upload your image:</label>
<input type="file" name="file" id="file"><br>
</form>
</div>
<div id='preview'>
</div>
<div id='tags'>
</div>
</form>
<div class="clear"></div>
........................................
<div id="footer">
<?php
include 'Footer.php';
?>
</div>
</div>
<div id='screen'>
</div>
</body>
</html>
The uploadimage.php contains:
<?php
session_start();
$allowedExts=array("gif","jpeg","jpg","png");
$extension= end(explode(".", $_FILES["file"]["name"]));
if((($_FILES["file"]["type"]=="image/gif")
||($_FILES["file"]["type"]=="image/jpeg")
||($_FILES["file"]["type"]=="image/jpg")
||($_FILES["file"]["type"]=="image/png"))
&& ($_FILES["file"]["size"]<2000000)
&& in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"]>0)
{
echo "Error:".$_FILES["file"]["error"]."<br>";
}
else{
// echo "Upload: ".$_FILES["file"]["name"]."<br>";
// echo "Store in: ".$_FILES["file"]["tmp_name"]."<br>";
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$_FILES["file"]["name"]);
//echo "Stored in "."upload/".$_FILES["file"]["name"];
echo "<img src='upload/".$_FILES["file"]["name"]."' class='preview' height='300' width='250'>";
$_SESSION['img']="upload/".$_FILES["file"]["name"];
}
}
else
{
echo "Invalid file";
}
?>
In the server the image is not stored in the upload folder when the user given an input and the image is not shown. Any solutions?:Please help. The server is linux server.
The problem is with file permission.
use the following command
sudo chmod 777 absolute_path_of_you_dir
on Ubuntu.
I have a jplayer here to play an audio: AUDIO
Problem is that it is not playing my audio file I have. How can I get the audio to play?
The audio files comes from the directory AudioFiles/Kalimba.mp3. I retrieve the directory from the db and then tell the jsplayer to play the audio in this directory. This should have then played the audio but nothing happens if I click on the play button
jplayer summary here: http://www.jplayer.org/latest/quick-start-guide/step-8-audio/
Below is code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Preview Audio</title>
<link type="text/css" href="jquery/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery/jquery.jplayer.min.js"></script>
</head>
<body>
<?php
$getaudio = 'AudioFiles/' . $_GET['filename'];
$audioquery = "SELECT AudioFile FROM Audio WHERE (AudioFile = ?)";
if (!$audiostmt = $mysqli->prepare($audioquery)) {
// Handle errors with prepare operation here
}
// Bind parameter for statement
$audiostmt->bind_param("s", $getaudio);
// Execute the statement
$audiostmt->execute();
if ($audiostmt->errno)
{
// Handle query error here
}
$audiostmt->bind_result($dbAudioFile);
$audiostmt->fetch();
$audiostmt->close();
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp4: "<?php echo $dbAudioFile; ?>"
});
},
swfPath: "/jquery",
supplied: "mp3"
});
});
</script>
<?php echo "File Path " . $dbAudioFile; ?>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
debug it with console, ex. firebug (ff plugin) and paste the result here please
I wonder whether someone may be able to help me please.
I'm using Aurigma's 'Image Uploader' software to allow users to add, and view images for the records they create with the image data collected and retrieved via an XML file.
One of the pages I've put together creates a gallery which allows the user to view the images, both individually and as part of a 'fancybox' slideshow. The script for this is shown below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
$galleryPath = 'UploadedFiles/';
$thumbnailsPath = $galleryPath . 'Thumbnails/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -475px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "imagefolders.php" /> View Uploaded Images In Folder Structure <a/> ← View All Uploaded Images </div>
<form id="gallery" class="page">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a> </li>
<li class="item"></li>
<p><span class="style4"><b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> <br />
<b>Image contained in folder:</b> <?php echo htmlentities($xmlFile->getAttribute('folder'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aB-a"> </div>
</div>
</div>
</div>
</form>
</body>
</html>
What I'd like to be able to do is now make the images that are retrieved, user specific, i.e. User A can only view their images.
If this information was being retrieved straight from a mySQL database I know that within PHP I can use the 'SELECT WHERE' statement to filter the returned records, but could someone tell me please is there an XML equivalent that I could use?
Many thanks
Allowing users to view only their own uploaded images is not such a simple task. If the images are stored in a publically accessable folder then anybody can view the images using their browser.
To achieve this there are a few alternatives such as:
storing the images in the database rather than the filesystem,
creating a new foler for each user on the filesystem and changing
the read write permissions for each folder, or
storing the images outside the web root and fetching the images
using php i.e.
Instead of providing a link to an image. Provide a link to a cgi
script which will automatically provide the proper header and
content of the image.
For example: image.php?sample.jpg
You can then make sure they are already authenticated (e.g. pass a
session id) as part of the link.
This would be part of the header, and then your image data can
follow.
<?php
$file = basename(urldecode($_GET['file']));
$fileDir = '/path/to/files/';
if (file_exists($fileDir . $file))
{
//perform some authorisation check
...
...
// Note: You should probably do some more checks
// on the filetype, size, etc.
$contents = file_get_contents($fileDir . $file);
// Note: You should probably implement some kind
// of check on filetype
header('Content-type: image/jpeg');
echo $contents;
}
?>