آموزش php : ضبط تصاویر از وبکم

در این آموزش می خواهیم روش ضبط تصویر از وبکم و ذخیره آن را در php نشانتان دهیم. برای ضبط تصویر کاربر از وبکم یا دوربین گوشی مبایل در php یک ابزار بسیار سودمند و قدرتمند در اختیار داریم و آن javascript webcam library است. از این ابزار براحتی می توانیم در php برای ضبط تصاویر از وبکم و ذخیره آن استفاده کنیم

در این آموزش روش کار با این ابزار قدرتمند و طریقه ضبط تصاویر از وبکم و ذخیره آن را در پروژه های Php با مثالی ساده آموزش میدهیم. ما از webcam library برای ضبط تصاویر زنده وبکم استفاده می کنیم. به کمک webcam library در کامپیوتر و گوشی مبایل می توانیم تصویر دوربین را ببینیم و آن را ذخیر کنیم.

در این مثال یک فایل index.php خواهیم ساخت. در این فایل با کدنویسی یک دکمه بنام Take Snapshot ایجاد می کنیم. با کلیک کردن دکمه js library تصویر دوربین را بر پایه فرمت 64 رشته ای ضبط می کند. سپس با کلیک کردن دکمه submit تصویر در پوشه ای ذخیره می شود

برای انجام این تمرین باید دو فایل با چیدمان دکمه ها مانند تصویر زیر ایجاد کنید

پیش نمایش

index.php

<!DOCTYPE html>
<html>
<head>
<title>php و jquery ضبط تصاویر وبکم با - clicksite.org</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">php و jquery ضبط تصاویر وبکم با - clicksite.org</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>


<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>

storeimage.php

<?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);

?>

حال باید یک پوشه به نام upload در شاخه اصلی سرور ایجاد کنید و پروژه را امتحان کنید

پکیج های آموزشی جدید

آموزش ساخت سیستم نظردهی با PHP

فصلِ: 1 , تعداد قسمت ها: 7 , سطح: صفر تا صد

موضوعات: آموزش PHP

این فصل در یک نگاه:

در این مجموعه به ساخت سیستم نظردهی در php می پردازیم.…

بنا به درخواست یکی از کاربران گرامی سایت (امیر تجاره) طی چند مجموعه آموزشی قصد داریم نحوه ساخت و پیاده سازی سیستم ثبت نظرات و هم چنین نحوه ثبت پاسخ به هر نظر را مورد بررسی قرار دهیم. این مج…

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

آموزش php : ضبط تصاویر از وبکم

پیش نمایش

index.php

storeimage.php

آیا نیاز به مدرک هم دارید؟