diff --git a/大头贴/css/index.css b/大头贴/css/index.css new file mode 100644 index 0000000..dcd8aca --- /dev/null +++ b/大头贴/css/index.css @@ -0,0 +1,60 @@ +@charset "utf-8"; + +:root { + font-size: 1vw; + --c-d-1: #000; + --c-l-1: #FFF; +} + +body,html { + padding: 0; + margin: 0; + border: 0; + height: 100vh; + width: 100vw; + background-color: var(--c-d-1); + color: var(--c-l-1); + overflow: hidden; +} + +.p-root { + width: 100vw; + height: 100vw; + position: relative; +} +.p-root>*{ + border: none; + width: 100%; + height: 100%; + position:absolute; + top:0; + left: 0; +} +.p-root>div{ + line-height: 100vw; + text-align: center; + color: rgba(255,255,255,.3); + text-shadow: 0 0 1vw rgba(0,0,0,.5); + font-size: 15vw; + font-weight: 900; +} +.p-root>div>div { + float: left; + width: 50vw; +} +.p-imgs { + width: 100vw; + height: calc(50vh - 50vw); + display: flex; + overflow: visible; + position: relative; +} + +.p-imgs>img { + width: calc(50vh - 52vw); + height: calc(50vh - 52vw); + margin: 1vw; + background-color: var(--c-l-1); + display: block; + +} diff --git a/大头贴/imgs/01.png b/大头贴/imgs/01.png new file mode 100644 index 0000000..3fa1dbc Binary files /dev/null and b/大头贴/imgs/01.png differ diff --git a/大头贴/imgs/02.png b/大头贴/imgs/02.png new file mode 100644 index 0000000..a502d7a Binary files /dev/null and b/大头贴/imgs/02.png differ diff --git a/大头贴/imgs/03.png b/大头贴/imgs/03.png new file mode 100644 index 0000000..52e3845 Binary files /dev/null and b/大头贴/imgs/03.png differ diff --git a/大头贴/imgs/04.png b/大头贴/imgs/04.png new file mode 100644 index 0000000..d4f8c1a Binary files /dev/null and b/大头贴/imgs/04.png differ diff --git a/大头贴/imgs/05.png b/大头贴/imgs/05.png new file mode 100644 index 0000000..4612df2 Binary files /dev/null and b/大头贴/imgs/05.png differ diff --git a/大头贴/imgs/06.png b/大头贴/imgs/06.png new file mode 100644 index 0000000..5080f93 Binary files /dev/null and b/大头贴/imgs/06.png differ diff --git a/大头贴/imgs/07.png b/大头贴/imgs/07.png new file mode 100644 index 0000000..0853807 Binary files /dev/null and b/大头贴/imgs/07.png differ diff --git a/大头贴/imgs/08.png b/大头贴/imgs/08.png new file mode 100644 index 0000000..a5666db Binary files /dev/null and b/大头贴/imgs/08.png differ diff --git a/大头贴/imgs/09.png b/大头贴/imgs/09.png new file mode 100644 index 0000000..eedb800 Binary files /dev/null and b/大头贴/imgs/09.png differ diff --git a/大头贴/imgs/10.png b/大头贴/imgs/10.png new file mode 100644 index 0000000..7c08481 Binary files /dev/null and b/大头贴/imgs/10.png differ diff --git a/大头贴/imgs/11.png b/大头贴/imgs/11.png new file mode 100644 index 0000000..298b1f3 Binary files /dev/null and b/大头贴/imgs/11.png differ diff --git a/大头贴/imgs/12.png b/大头贴/imgs/12.png new file mode 100644 index 0000000..23e5b27 Binary files /dev/null and b/大头贴/imgs/12.png differ diff --git a/大头贴/imgs/13.png b/大头贴/imgs/13.png new file mode 100644 index 0000000..82de976 Binary files /dev/null and b/大头贴/imgs/13.png differ diff --git a/大头贴/imgs/14.png b/大头贴/imgs/14.png new file mode 100644 index 0000000..4ff13d4 Binary files /dev/null and b/大头贴/imgs/14.png differ diff --git a/大头贴/imgs/15.png b/大头贴/imgs/15.png new file mode 100644 index 0000000..4483097 Binary files /dev/null and b/大头贴/imgs/15.png differ diff --git a/大头贴/imgs/16.png b/大头贴/imgs/16.png new file mode 100644 index 0000000..bb55667 Binary files /dev/null and b/大头贴/imgs/16.png differ diff --git a/大头贴/imgs/17.png b/大头贴/imgs/17.png new file mode 100644 index 0000000..2c51519 Binary files /dev/null and b/大头贴/imgs/17.png differ diff --git a/大头贴/imgs/18.png b/大头贴/imgs/18.png new file mode 100644 index 0000000..e545187 Binary files /dev/null and b/大头贴/imgs/18.png differ diff --git a/大头贴/imgs/19.png b/大头贴/imgs/19.png new file mode 100644 index 0000000..b7279e9 Binary files /dev/null and b/大头贴/imgs/19.png differ diff --git a/大头贴/imgs/20.png b/大头贴/imgs/20.png new file mode 100644 index 0000000..257cca5 Binary files /dev/null and b/大头贴/imgs/20.png differ diff --git a/大头贴/imgs/21.png b/大头贴/imgs/21.png new file mode 100644 index 0000000..16b0c42 Binary files /dev/null and b/大头贴/imgs/21.png differ diff --git a/大头贴/imgs/22.png b/大头贴/imgs/22.png new file mode 100644 index 0000000..92f3eff Binary files /dev/null and b/大头贴/imgs/22.png differ diff --git a/大头贴/imgs/23.png b/大头贴/imgs/23.png new file mode 100644 index 0000000..5ad1e4a Binary files /dev/null and b/大头贴/imgs/23.png differ diff --git a/大头贴/imgs/24.png b/大头贴/imgs/24.png new file mode 100644 index 0000000..81ccff7 Binary files /dev/null and b/大头贴/imgs/24.png differ diff --git a/大头贴/imgs/新建文本文档.md b/大头贴/imgs/新建文本文档.md new file mode 100644 index 0000000..4a0532b --- /dev/null +++ b/大头贴/imgs/新建文本文档.md @@ -0,0 +1 @@ +image.png \ No newline at end of file diff --git a/大头贴/index.html b/大头贴/index.html new file mode 100644 index 0000000..5a99573 --- /dev/null +++ b/大头贴/index.html @@ -0,0 +1,32 @@ + + + + + + + + 大头贴 + + + + +
+ + + +
拍照
+
+
确定
+
取消
+
+
+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/大头贴/js/index.js b/大头贴/js/index.js new file mode 100644 index 0000000..74ebcfb --- /dev/null +++ b/大头贴/js/index.js @@ -0,0 +1,134 @@ +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(); + } +}); \ No newline at end of file diff --git a/大头贴/实验01.抓取摄像头图片到画布.html b/大头贴/实验01.抓取摄像头图片到画布.html new file mode 100644 index 0000000..9cef7d5 --- /dev/null +++ b/大头贴/实验01.抓取摄像头图片到画布.html @@ -0,0 +1,93 @@ + + + + + + + + 实验01.抓取摄像头图片到画布 + + + +
+
+ + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/大头贴/实验02.使用画布合成多张图片.html b/大头贴/实验02.使用画布合成多张图片.html new file mode 100644 index 0000000..1f51f2d --- /dev/null +++ b/大头贴/实验02.使用画布合成多张图片.html @@ -0,0 +1,63 @@ + + + + + + + 实验02.使用画布合成多张图片 + + + + + + + + + + + \ No newline at end of file