Доброго времени! Достатка и здоровья! Необходима помощь найти ошибку или предложить свой вариант: 1. на сайте https://operatortko.ru/test2/ созданы два файла index.html HTML: <html lang="en" dir="ltr" xmlns:fb="http://ogp.me/ns/fb#"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> // Put event listeners into place window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var video = document.getElementById('video'); var mediaConfig = { video: true }; var errBack = function(e) { console.log('An error has occurred!', e) }; // Put video listeners into place if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) { //video.src = window.URL.createObjectURL(stream); video.srcObject = stream; video.play(); }); } /* Legacy code below! */ else if(navigator.getUserMedia) { // Standard navigator.getUserMedia(mediaConfig, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(mediaConfig, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed navigator.mozGetUserMedia(mediaConfig, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // Trigger photo take document.getElementById('snap').addEventListener('click', function() { context.drawImage(video, 0, 0, 480, 640); }); }, false); var sendCanvas = function (cnv) { var img = cnv.toDataURL('image/png').replace('data:image/png;base64,', ''); var sender = newXMLHttpRequest(); sender.open('POST', 'test.php', true); sender.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); sender.onreadystatechange = function () { if (sender.readyState == 4) { console.log(sender.responseText); } }; sender.send('img='+img); }; </script> <!-- <script> var ctx = canvas.getContext("2d"); // ctx.font = "120px Arial"; // ctx.fillText("\uD83D\uDDFA", 15, 115); canvas.onclick = function() { var dataURL = canvas.toDataURL("image/jpeg"); var link = document.createElement("a"); document.body.appendChild(link); // Firefox requires the link to be in the body :( link.href = dataURL; link.download = "test.jpg"; link.click(); document.body.removeChild(link); }; </script> <script type="application/javascript" language="javascript"> function saveIt() { var myDrawing = document.getElementById("canvas"); var drawingString = myDrawing.toDataURL("image/jpeg"); var postData = "canvasData="+drawingString; var ajax = new XMLHttpRequest(); ajax.open("POST",'/convas_save.php',true); ajax.setRequestHeader('Content-Type', 'canvas/upload'); ajax.onreadystatechange=function() {if (ajax.readyState == 4) {alert("SAVE OK");}} ajax.send(postData); } </script> --> <style> video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; } #canvas { margin-top: 20px; border: 1px solid #ccc; display: block; } </style> </head> <body> <!-- Ideally these elements aren't created until it's confirmed that the client supports video/camera, but for the sake of illustrating the elements involved, they are created with markup (not JavaScript) --> <video id="video" width="480" height="640" autoplay></video> <button id="snap" class="sexyButton">Сделать фото</button> <canvas id="canvas" width="480" height="640"></canvas> <br> <div> <button onClick="saveIt();">Сохранить фото</button> </div> </body> </html> и test.php PHP: <?php $img = str_replace(' ', '+', $_POST['img']); $img = base64_decode($img); file_put_contents('img.png', $img); echo 'Готово'; ?> Помогите найти ошибку, почему canvas не сохраняется на сервере. Или предложите свой вариант! Очень надеюсь на помощь!