Есть вот такая разметка:
div.filling-account__form-field
span 1. Загрузите фото
div.filling-account__add-picture#dropbox
video(id="video" class="video-stream") Video stream not available.
div.make-photo__wrap
button(id="make-button" class="take-photo") Сделать снимок
div.take-photo__wrap
button(id="startbutton" class="take-photo") Еще раз
button(id="applytbutton" class="take-photo") Установить
canvas(id="canvas" class="draw-photo")
div.output
img(id="photo")
div.output-input
img(id="photo")
div.upload-wrap
p Добавьте фото и получите 80% больше просмотров!
div.btn-wrap
label(class="add-something" for="uploadImage")
+icon('photo-camera')
span Загрузить
input(type="file" class="non-display" id="uploadImage")
label(class="add-something" id="use-webcam")
+icon('webcam')
span Использовать<br/> вебкамеру
p Или перетащите фото сюда
есть вот такая функция
function makePhoto() {
// The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream.
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.
var streaming = false;
// The various HTML elements we need to configure or control. These
// will be set by the startup() function.
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');
var makePhoto = document.querySelector('.make-photo__wrap');
var takePhoto = document.querySelector('.take-photo__wrap');
var morePhoto = document.querySelector('#startbutton');
var inputPhoto = document.querySelector('#uploadImage');
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('make-button');
uploadWrap.style.display = "none";
makePhoto.style.display = "block";
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);
// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.
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();
makePhoto.style.display = "none";
takePhoto.style.display = "block";
}, false);
clearphoto();
}
// Fill the photo with an indication that none has been
// captured.
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);
}
// Capture a photo by fetching the current contents of the video
// and drawing it into a canvas, then converting that to a PNG
// format data URL. By drawing it on an offscreen canvas and then
// drawing that to the screen, we can change its size and/or apply
// other changes before drawing it.
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')
console.log(file);
return(file);
}
/* take photo with dragDropLoad begin */
(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);
inputPhoto.files[0] = file;
}
}
function createimage(file) {
var imgUser = document.querySelector('.output-input img');
var uploadWrap = document.querySelector('.upload-wrap');
uploadWrap.style.display = 'none';
imgUser.style.display = 'block';
imgUser.src = window.URL.createObjectURL(file);
imgUser.onload = function() {
window.URL.revokeObjectURL(this.src);
}
}
}());
/* take photo with dragDropLoad end */
/*take photo whith input type file*/
(function inputFile() {
var picture;
var output = document.querySelector('.output-input img');
var uploadField = document.querySelector('.upload-wrap');
inputPhoto.addEventListener('change', handleFiles, false);
function handleFiles() {
if( this.files && this.files[0] ) {
const src = "/images/" + this.files[0].name;
output.setAttribute("src", window.URL.createObjectURL(this.files[0]));
uploadField.style.display = "none";
output.style.display = "block";
}
}
})();
applyphoto.addEventListener('click', savephoto, false);
useWebcam.addEventListener('click', startup, false);
morePhoto.addEventListener('click', startup, false);
// Set up our event listener to run the startup process
// once loading is complete.
//window.addEventListener('load', startup, false);
};
Почему не проходят клики:
applyphoto.addEventListener('click', savephoto, false);
morePhoto.addEventListener('click', startup, false);
Если button сменю на div то норм... В чем ошибка?
