Support change background image on render

hongwen-sun · Jun 26, 2022 · 24a6183 · 24a6183
1 parent c7db6c3
commit 24a6183
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/mocaprender/script.js b/mocaprender/script.js
@@ -685,7 +685,13 @@ const drawResults = (results) => {
 // switch use camera or video file
 if (localStorage.getItem("useCamera") == "camera") {
     navigator.mediaDevices
-        .getUserMedia({ video: { deviceId: localStorage.getItem("cameraId"),width: 1280, height: 720 } })
+        .getUserMedia({
+            video: {
+                deviceId: localStorage.getItem("cameraId"),
+                width: 1280,
+                height: 720,
+            },
+        })
         .then(function (stream) {
             videoElement.srcObject = stream;
             videoElement.play();
@@ -770,3 +776,24 @@ document.addEventListener("keydown", (event) => {
             break;
     }
 });
+
+var contentDom = document.querySelector("#model");
+
+//阻止相关事件默认行为
+contentDom.ondragcenter =
+    contentDom.ondragover =
+    contentDom.ondragleave =
+        () => {
+            return false;
+        };
+
+//对拖动释放事件进行处理
+contentDom.ondrop = (e) => {
+    //console.log(e);
+    var filePath = e.dataTransfer.files[0].path.replaceAll("\\", "/");
+    console.log(filePath);
+    contentDom.style.backgroundImage = `url(${filePath})`;
+    contentDom.style.backgroundSize = "cover";
+    contentDom.style.backgroundPosition = "center";
+    contentDom.style.backgroundRepeat = "no-repeat";
+};
diff --git a/render/render.js b/render/render.js
@@ -606,4 +606,25 @@ document.addEventListener("keydown", (event) => {
 
 if (localStorage.getItem("useCamera") !== "camera") {
     document.querySelector("#model").style.transform = "scale(-1, 1)";
-}
+}
+
+var contentDom = document.querySelector("#model");
+
+//阻止相关事件默认行为
+contentDom.ondragcenter =
+    contentDom.ondragover =
+    contentDom.ondragleave =
+        () => {
+            return false;
+        };
+
+//对拖动释放事件进行处理
+contentDom.ondrop = (e) => {
+    //console.log(e);
+    var filePath = e.dataTransfer.files[0].path.replaceAll("\\", "/");
+    console.log(filePath);
+    contentDom.style.backgroundImage = `url(${filePath})`;
+    contentDom.style.backgroundSize = "cover";
+    contentDom.style.backgroundPosition = "center";
+    contentDom.style.backgroundRepeat = "no-repeat";
+};