You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.5 KiB
JavaScript
134 lines
3.5 KiB
JavaScript
let root = document.querySelector(".p-root");
|
|
let imgs = document.querySelectorAll(".p-imgs");
|
|
let video = root.children[0];
|
|
let canvas = root.children[1];
|
|
let img = root.children[2];
|
|
let btnTack = root.children[3];
|
|
let btns = root.children[4];
|
|
let btnConfirm = btns.children[0];
|
|
let btnCancel = btns.children[1];
|
|
|
|
/**
|
|
* 处理点击选择模板图片
|
|
*/
|
|
imgs[0].addEventListener("click", (e) => {
|
|
if (e.target instanceof HTMLImageElement) {
|
|
img.src = e.target.src;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 生成模板图片
|
|
*/
|
|
for (let i = 1; i <= 24; i++) {
|
|
let img = new Image();
|
|
img.onerror = () => {
|
|
img.src = "imgs/01.png";
|
|
}
|
|
img.src = "imgs/" + i.toString().padStart(2, "0") + ".png";
|
|
imgs[0].appendChild(img);
|
|
}
|
|
|
|
/**
|
|
* 处理图片的左右移动
|
|
*/
|
|
imgs.forEach(item => {
|
|
let x = 0;
|
|
let x1 = -1;
|
|
console.info(item.scrollWidth, item.clientWidth);
|
|
item.addEventListener("touchmove", (e) => {//绑定触摸移动事件
|
|
if (x1 > -1) {
|
|
x += e.changedTouches[0].screenX - x1;
|
|
}
|
|
x1 = e.changedTouches[0].screenX;
|
|
item.style.left = x + "px";
|
|
});
|
|
item.addEventListener("touchend", (e) => {//绑定触摸移动事件结束
|
|
x1 = -1;
|
|
});
|
|
});
|
|
|
|
/**
|
|
* 获取视频流
|
|
*/
|
|
btns.hidden = true;//确定,取消不可见
|
|
navigator.mediaDevices.getUserMedia({
|
|
audio: false,
|
|
video: {
|
|
facingMode: "environment",//前置:user,后置:environment
|
|
width: { min: 800, ideal: 1080, max: 2000 },
|
|
height: { min: 800, ideal: 1080, max: 2000 }
|
|
}
|
|
// width:800,
|
|
// height:800
|
|
|
|
|
|
// }).catch(e=>{
|
|
// console.error(e);
|
|
// return navigator.mediaDevices.getUserMedia({
|
|
// audio:false,
|
|
// video:{
|
|
// facingMode: "environment",//前置:user,后置:environment
|
|
// // width: {min:100,ideal: 200,max:2000},
|
|
// // height: {min:100,ideal: 200,max:2000 }
|
|
|
|
// }
|
|
// });
|
|
}).then((stream) => {
|
|
console.info(stream);
|
|
console.info(stream.getTracks()[0]);
|
|
console.info(stream.getTracks()[0].getConstraints());
|
|
console.info(stream.getTracks()[0].getSettings());
|
|
console.info(stream.getTracks()[0].getCapabilities());
|
|
console.info(stream.getTracks()[0].applyConstraints());
|
|
console.info(stream.getVideoTracks());
|
|
// video.onloadedmetadata = function (e) {
|
|
// console.info(e);
|
|
// };
|
|
video.srcObject = stream;
|
|
}).catch(e => {
|
|
console.error(e);
|
|
alert("摄像设备不可用");
|
|
});
|
|
|
|
/**
|
|
* 处理拍照
|
|
*/
|
|
btnTack.addEventListener("click", () => {
|
|
canvas.getContext('2d').drawImage(video, 0, 0, 1200, 1200);
|
|
btnTack.hidden = true;
|
|
btns.hidden = false;
|
|
});
|
|
|
|
/**
|
|
* 处理取消
|
|
*/
|
|
btnCancel.addEventListener("click", () => {
|
|
canvas.getContext('2d').clearRect(0, 0, 1200, 1200);
|
|
btnTack.hidden = false;
|
|
btns.hidden = true;
|
|
});
|
|
/**
|
|
* 处理确定
|
|
*/
|
|
btnConfirm.addEventListener("click", () => {
|
|
canvas.getContext('2d').drawImage(img, 0, 0, 1200, 1200);
|
|
let item = new Image();
|
|
item.src = canvas.toDataURL("image/png");
|
|
imgs[1].appendChild(item);
|
|
canvas.getContext('2d').clearRect(0, 0, 1200, 1200);
|
|
btnTack.hidden = false;
|
|
btns.hidden = true;
|
|
});
|
|
|
|
/**
|
|
* 处理点击照片事件
|
|
*/
|
|
imgs[1].addEventListener("click", (e) => {
|
|
if (e.target instanceof HTMLImageElement) {
|
|
let a = document.createElement("a");
|
|
a.href = e.target.src;
|
|
a.download = "大头贴-" + new Date().getTime() + ".png";
|
|
a.click();
|
|
}
|
|
}); |