Преглед изворни кода

fix-微信浏览器保存图片问题

shaogen1995 пре 1 година
родитељ
комит
940db185fd
4 измењених фајлова са 219 додато и 113 уклоњено
  1. 121 109
      index.html
  2. 18 4
      myCode/index.js
  3. 39 0
      myCode/style.css
  4. 41 0
      myCode/style.less

+ 121 - 109
index.html

@@ -1,19 +1,21 @@
 <!DOCTYPE html>
 <html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>常中e大观园</title>
-    <link rel="shortcut icon" href="TemplateData/favicon.ico">
-    <link rel="stylesheet" href="TemplateData/style.css">
-    <link rel="manifest" href="manifest.webmanifest">
-
-    <!-- 引用自己的样式 -->
-    <link rel="stylesheet" href="./myCode/style.css">
-  
-  </head>
-  <body>
-    <div id="unity-container">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>常中e大观园</title>
+  <link rel="shortcut icon" href="TemplateData/favicon.ico">
+  <link rel="stylesheet" href="TemplateData/style.css">
+  <link rel="manifest" href="manifest.webmanifest">
+
+  <!-- 引用自己的样式 -->
+  <link rel="stylesheet" href="./myCode/style.css">
+
+</head>
+
+<body>
+  <div id="unity-container">
       <canvas id="unity-canvas" tabindex="-1"></canvas>
       <div id="unity-loading-bar">
         <div id="unity-logo"></div>
@@ -24,105 +26,115 @@
       <div id="unity-warning"> </div>
     </div>
 
-    <!-- 加载中文字 -->
-    <div id="lodingTxt">加载中...</div>
+  <!-- 加载中文字 -->
+  <div id="lodingTxt">加载中...</div>
 
-    <!-- 开场视频 -->
-    <div class="videoBox">
-      <video src="./myCode/video.mp4" controls muted autoplay></video>
-      <div class="skipTxt">跳 过</div>
-    </div>
+  <!-- 开场视频 -->
+  <div class="videoBox">
+    <video src="./myCode/video.mp4" controls muted autoplay></video>
+    <div class="skipTxt">跳 过</div>
+  </div>
 
-    <script>
-      let unityExamples = null
-      
-      window.addEventListener("load", function () {
-        if ("serviceWorker" in navigator) {
-          navigator.serviceWorker.register("ServiceWorker.js");
-        }
-      });
+  <!-- 分享海报 -->
+  <div class="shareBox">
+    <img src="./StreamingAssets/share.png" alt="">
+    <div class="shareTit">长按图片保存</div>
+    <div class="shareBtn">关闭</div>
+  </div>
+
+  <script>
+    let unityExamples = null
 
-      var container = document.querySelector("#unity-container");
-      var canvas = document.querySelector("#unity-canvas");
-      var loadingBar = document.querySelector("#unity-loading-bar");
-      var progressBarFull = document.querySelector("#unity-progress-bar-full");
-      var warningBanner = document.querySelector("#unity-warning");
-
-      // Shows a temporary message banner/ribbon for a few seconds, or
-      // a permanent error message on top of the canvas if type=='error'.
-      // If type=='warning', a yellow highlight color is used.
-      // Modify or remove this function to customize the visually presented
-      // way that non-critical warnings and error messages are presented to the
-      // user.
-      function unityShowBanner(msg, type) {
-        function updateBannerVisibility() {
-          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
-        }
-        var div = document.createElement('div');
-        div.innerHTML = msg;
-        warningBanner.appendChild(div);
-        if (type == 'error') div.style = 'background: red; padding: 10px;';
-        else {
-          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
-          setTimeout(function() {
-            warningBanner.removeChild(div);
-            updateBannerVisibility();
-          }, 5000);
-        }
-        updateBannerVisibility();
+    window.addEventListener("load", function () {
+      if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("ServiceWorker.js");
       }
+    });
+
+    var container = document.querySelector("#unity-container");
+    var canvas = document.querySelector("#unity-canvas");
+    var loadingBar = document.querySelector("#unity-loading-bar");
+    var progressBarFull = document.querySelector("#unity-progress-bar-full");
+    var warningBanner = document.querySelector("#unity-warning");
 
-      var buildUrl = "Build";
-      var loaderUrl = buildUrl + "/ChangZhouHospital_1.30.loader.js";
-      var config = {
-        dataUrl: buildUrl + "/ChangZhouHospital_1.30.data.unityweb",
-        frameworkUrl: buildUrl + "/ChangZhouHospital_1.30.framework.js.unityweb",
-        codeUrl: buildUrl + "/ChangZhouHospital_1.30.wasm.unityweb",
-        streamingAssetsUrl: "StreamingAssets",
-        companyName: "DefaultCompany",
-        productName: "ChangZhouHospital",
-        productVersion: "0.1",
-        showBanner: unityShowBanner,
-      };
-
-      // By default Unity keeps WebGL canvas render target size matched with
-      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
-      // Set this to false if you want to decouple this synchronization from
-      // happening inside the engine, and you would instead like to size up
-      // the canvas DOM size and WebGL render target sizes yourself.
-      // config.matchWebGLToCanvasSize = false;
-
-      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-        // Mobile device style: fill the whole browser client area with the game canvas:
-        var meta = document.createElement('meta');
-        meta.name = 'viewport';
-        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
-        document.getElementsByTagName('head')[0].appendChild(meta);
+    // Shows a temporary message banner/ribbon for a few seconds, or
+    // a permanent error message on top of the canvas if type=='error'.
+    // If type=='warning', a yellow highlight color is used.
+    // Modify or remove this function to customize the visually presented
+    // way that non-critical warnings and error messages are presented to the
+    // user.
+
+    function unityShowBanner(msg, type) {
+      function updateBannerVisibility() {
+        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
+      }
+      var div = document.createElement('div');
+      div.innerHTML = msg;
+      warningBanner.appendChild(div);
+      if (type == 'error') div.style = 'background: red; padding: 10px;';
+      else {
+        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
+        setTimeout(function () {
+          warningBanner.removeChild(div);
+          updateBannerVisibility();
+        }, 5000);
       }
+      updateBannerVisibility();
+    }
+
+
+    var buildUrl = "Build";
+    var loaderUrl = buildUrl + "/ChangZhouHospital_1.30.loader.js";
+    var config = {
+      dataUrl: buildUrl + "/ChangZhouHospital_1.30.data.unityweb",
+      frameworkUrl: buildUrl + "/ChangZhouHospital_1.30.framework.js.unityweb",
+      codeUrl: buildUrl + "/ChangZhouHospital_1.30.wasm.unityweb",
+      streamingAssetsUrl: "StreamingAssets",
+      companyName: "DefaultCompany",
+      productName: "ChangZhouHospital",
+      productVersion: "0.1",
+      showBanner: unityShowBanner,
+    };
+
+    // By default Unity keeps WebGL canvas render target size matched with
+    // the DOM size of the canvas element (scaled by window.devicePixelRatio)
+    // Set this to false if you want to decouple this synchronization from
+    // happening inside the engine, and you would instead like to size up
+    // the canvas DOM size and WebGL render target sizes yourself.
+    // config.matchWebGLToCanvasSize = false;
+
+    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+      // Mobile device style: fill the whole browser client area with the game canvas:
+      var meta = document.createElement('meta');
+      meta.name = 'viewport';
+      meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
+      document.getElementsByTagName('head')[0].appendChild(meta);
+    }
+
+    loadingBar.style.display = "block";
+
+    var script = document.createElement("script");
+    script.src = loaderUrl;
+    script.onload = () => {
+      createUnityInstance(canvas, config, (progress) => {
+        progressBarFull.style.width = 100 * progress + "%";
+      }).then((unityInstance) => {
+        loadingBar.style.display = "none";
+
+        // 把unity的实例保存起来
+        unityExamples = unityInstance
+        // 隐藏加载中文字
+        document.querySelector('#lodingTxt').style.display = 'none'
+
+      }).catch((message) => {
+        alert(message);
+      });
+    };
+    document.body.appendChild(script);
+  </script>
+
+  <!-- 引入自己的js -->
+  <script src="./myCode/index.js"></script>
+</body>
 
-      loadingBar.style.display = "block";
-
-      var script = document.createElement("script");
-      script.src = loaderUrl;
-      script.onload = () => {
-        createUnityInstance(canvas, config, (progress) => {
-          progressBarFull.style.width = 100 * progress + "%";
-        }).then((unityInstance) => {
-          loadingBar.style.display = "none";
-
-          // 把unity的实例保存起来
-          unityExamples = unityInstance
-          // 隐藏加载中文字
-          document.querySelector('#lodingTxt').style.display = 'none'
-
-        }).catch((message) => {
-          alert(message);
-        });
-      };
-      document.body.appendChild(script);
-    </script>
-
-    <!-- 引入自己的js -->
-    <script src="./myCode/index.js"></script>
-  </body>
-</html>
+</html>

+ 18 - 4
myCode/index.js

@@ -27,9 +27,23 @@ videoBtnDom.onclick = () => {
   videoPalyEnd()
 }
 
+
+// 分享页面
+const shareDom = document.querySelector('.shareBox')
+
 window.onClickShare = () => {
-	var a = document.createElement('a')
-    a.download = 'image'
-    a.href = '../StreamingAssets/share.png'
-    a.click()
+
+  // console.log(123456);
+  shareDom.style.opacity = '1'
+  shareDom.style.pointerEvents = 'auto'
+
+  // var a = document.createElement('a')
+  //   a.download = 'image'
+  //   a.href = '../StreamingAssets/share.png'
+  //   a.click()
+}
+
+document.querySelector('.shareBtn').onclick = () => {
+  shareDom.style.opacity = '0'
+  shareDom.style.pointerEvents = 'none'
 }

+ 39 - 0
myCode/style.css

@@ -78,3 +78,42 @@ body #lodingTxt {
   text-align: center;
   color: #fff;
 }
+.shareBox {
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s;
+  position: absolute;
+  z-index: 9000;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 40px;
+  text-align: center;
+}
+.shareBox > img {
+  object-fit: contain;
+  width: 100%;
+  height: calc(100% - 80px);
+  max-width: 100%;
+  max-height: calc(100% - 80px);
+}
+.shareBox .shareTit {
+  margin: 3px auto 24px;
+  color: #fff;
+  font-size: 12px;
+  letter-spacing: 2px;
+}
+.shareBox .shareBtn {
+  color: #fff;
+  width: 100px;
+  margin: 0 auto;
+  height: 36px;
+  line-height: 34px;
+  border: 1px solid #fff;
+  border-radius: 18px;
+  text-align: center;
+  font-size: 14px;
+  letter-spacing: 2px;
+}

+ 41 - 0
myCode/style.less

@@ -93,4 +93,45 @@ body {
     text-align: center;
     color: #fff;
   }
+}
+
+// 分享海报
+.shareBox{
+  opacity: 0;
+  pointer-events: none;
+  transition: all .3s;
+  position: absolute;
+  z-index: 9000;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0,0,0,.8);
+  padding: 40px;
+  text-align: center;
+  &>img{
+    object-fit: contain;
+    width: 100%;
+    height: calc(100% - 80px);
+    max-width: 100%;
+    max-height: calc(100% - 80px);
+  }
+  .shareTit{
+    margin: 3px auto 24px;
+    color: #fff;
+    font-size: 12px;
+    letter-spacing: 2px;
+  }
+  .shareBtn{
+    color: #fff;
+    width: 100px;
+    margin: 0 auto;
+    height: 36px;
+    line-height: 34px;
+    border: 1px solid #fff;
+    border-radius: 18px;
+    text-align: center;
+    font-size: 14px;
+    letter-spacing: 2px;
+  }
 }