Ребятушки, написал кучу функций, но они не везде работаю правильно и валят весь js
что я имею ввиду когда говорю не везде правильно?
ну т.е. переходишь на другую страницу функция не находит в ней искомый элемент в результате чего "падает"
адекватно работает только функция отправки формы, у нее немного по иному устроена инициализация
вот сам код
(function() {
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
var picture = null;
var useWebcam = document.querySelector('#use-webcam');
var uploadWrap = document.querySelector('.upload-wrap');
var applyphoto = document.querySelector('#applytbutton');
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
uploadWrap.style.display = "none";
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
if (isNaN(height)) {
height = width / (4/3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
picture = data.split(',')[1];
photo.style.display = 'block';
} else {
clearphoto();
}
}
function savePhoto() {
var utf8 = atob(picture),
array = [];
//---
for(var i = 0; i < utf8.length; i++)
array.push(utf8.charCodeAt(i));
var myBlob = new Blob([new Uint8Array(array)], {type: 'image/png'});
var file = new File([myBlob], 'user-photo')
return(file);
}
applyphoto.addEventListener('click', savephoto, false);
useWebcam.addEventListener('click', startup, false)
Set up our event listener to run the startup process
once loading is complete.
window.addEventListener('load', startup, false);
}());
(function dragDropLoad() {
var dropbox;
dropbox = document.querySelector('#dropbox');
dropbox.addEventListener('dragenter', dragenter, false);
dropbox.addEventListener('dragover', dragover, false);
dropbox.addEventListener('drop', drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var file = dt.files[0];
if (file)
createimage(file);
function createimage(file) {
var imgUser = document.querySelector('.output img');
var uploadWrap = document.querySelector('.upload-wrap');
console.log(imgUser, file);
uploadWrap.style.display = 'none';
imgUser.style.display = 'block';
imgUser.src = window.URL.createObjectURL(file);
imgUser.onload = function() {
window.URL.revokeObjectURL(this.src);
}
}
handleFiles(files);
}
}());
(function inputFile() {
var picture;
var input = document.querySelector('#uploadImage');
input.addEventListener('change', handleFiles, false);
function handleFiles() {
picture = this.files[0];
}
})();
(function () {
var form = function(option) {
var initCalled = false;
var elsForm = document.querySelector(option.name);
var init = function() {
if (!initCalled) {
initCalled = true;
handleSubmit(elsForm);
}
};
function toJSONString( form ) {
var obj = {};
var elements = form.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
if (element.type === "radio" && element.checked){
obj[ name ] = value;
} else if (element.type !== "radio") {
obj[ name ] = value;
}
}
}
return JSON.stringify( obj );
}
var handleSubmit = function(elsForm) {
elsForm.addEventListener("submit", function( e ) {
e.preventDefault();
var json = toJSONString( this );
sendForm(json);
}, false)
};
function sendForm(data) {
var uri = "site/register";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
fd.append('myFile', data);
xhr.send(fd);
};
return {
init: init,
sendForm: sendForm
};
}
window.form = form;
})();
Посоветуйте как его организовать правильно? Может почитать чего?
