Update index.html

index.src.html

@@ -286,6 +286,17 @@
                     使用 iOS 的样式（以上两项不可用）
                 </label>
             </div>
+            <div class="mdui-col-xs-8 mdui-col-sm-10">
+                <label class="mdui-checkbox">
+                    <input id="configTopBarCustom" type="checkbox" name="configTopBarIos" />
+                    <i class="mdui-checkbox-icon"></i>
+                    使用自定义通知栏图片
+                </label>
+            </div>
+            <div class="mdui-col-xs-4 mdui-col-sm-2">
+                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configTopBarCustomImage').click();">选择图片</button>
+                <input id="configTopBarCustomImage" type="file" style="display:none" />
+            </div>
         </div>
 
         <div class="mdui-textfield">
@@ -326,6 +337,9 @@
                 <div style="flex-grow:1"></div>
                 <img id="topBarIconIos" class="topBarIcon" />
             </div>
+            <div id="topBarCustom">
+                <img id="topBarCustomImage" style="width:100%" />
+            </div>
             <div id="header" class="header">
                 <img style="width:28px;height:48px" />
                 <div style="flex-grow:1;text-align:center">详情</div>
@@ -470,7 +484,9 @@
                 <br>
                 如果实在是很在意通知栏的样式的话，可以从自己的手机上截一个通知栏的图然后覆盖上去……
                 <br>
-                iOS 的样式已经添加了，不过因为我并没有 iOS 设备，所以只能参考网上找到的截图来写样式，<strong>不一定能做到和实机一样</strong>。
+                2023.5.8 更新：iOS 的样式已经添加了，不过因为我并没有 iOS 设备，所以只能参考网上找到的截图来写样式，<strong>不一定能做到和实机一样</strong>。
+                <br>
+                2023.6.14 更新：已经添加了使用自定义通知栏图片的选项。可以自行在手机上截图并裁剪出通知栏部分，然后使它出现在生成的截图上。
                 <h4>能不能生成纯文字/转发图片的截图？</h4>
                 <del>懒得写样式，心情好的时候再加上～(*´ω`*)</del>
                 <br>
@@ -529,7 +545,7 @@ https://example.com/avatar-2.jpg
         </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/combine/npm/html2canvas@1/dist/html2canvas.min.js,npm/mdui@1/dist/js/mdui.min.js,gh/TransparentLC/WechatMomentScreenshot@8092d732c140378a811b5531bb80e9eab596e060/main.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/combine/npm/html2canvas@1/dist/html2canvas.min.js,npm/mdui@1/dist/js/mdui.min.js,gh/TransparentLC/WechatMomentScreenshot@aa171c8d7194c775c452178b6a7d37fad141b79e/main.min.js"></script>
     <!-- <script src="https://cdn.jsdelivr.net/npm/mdui@1/dist/js/mdui.min.js"></script> -->
     <!-- <script src="https://cdn.jsdelivr.net/npm/html2canvas@1/dist/html2canvas.min.js"></script> -->
     <!-- <script src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/main.min.js"></script> -->