更新文档

070.提取图片主题色.html

@@ -63,6 +63,7 @@
 
     <div class="choose-image">
         选择图片
+
         <img id="preview" src="">
     </div>
 
@@ -157,7 +158,7 @@
                 console.log(`rgb(${colorRgbVal})`);
                 colorItemDom.classList.add('result-color-item')
                 colorItemDom.style.background = `rgba(${color.key})`
-                colorItemDom.style.color = `rgb(${invertColor(colorKeyArr)})`
+                colorItemDom.style.color = `rgb(${darkenColor(colorKeyArr)})`
                 colorItemDom.textContent = Convertor.rgbToHex(`rgb(${colorRgbVal})`)
 
                 resultColorListDom.appendChild(colorItemDom)
@@ -184,6 +185,9 @@
             })
         })
 
+        preview.setAttribute('src', './assets/mnls.jpg')
+
+
         function chooseImage() {
             return new Promise((resolve) => {
                 const fileInput = document.createElement('input');
@@ -228,6 +232,14 @@
         function invertColor(color) {
             return color.map(item => 255 - +item).join()
         }
+
+        /**
+         * 加深色
+         */
+        function darkenColor(color) {
+            return color.map(item => +item > 128 ? Math.abs(+item + 32) : Math.abs(+item - 32)).join()
+        }
+
     </script>
 </body>
 

README.md

@@ -119,6 +119,40 @@ https://linyisonger.github.io/H5.Examples/
 ![](./assets/preview/052.png)
 ##### [**飞机大战**](https://linyisonger.github.io/H5.Examples/?name=./053.飞机大战.html) 
 ![](./assets/preview/053.png)
+##### [**浏览器多窗口堆叠特效**](https://linyisonger.github.io/H5.Examples/?name=./054.浏览器多窗口堆叠特效.html) 
+![](./assets/preview/054.png)
+##### [**A星寻路**](https://linyisonger.github.io/H5.Examples/?name=./055.A星寻路.html) 
+![](./assets/preview/055.png)
+##### [**Three 3D展馆**](https://linyisonger.github.io/H5.Examples/?name=./056.Three%203D展馆.html) 
+![](./assets/preview/056.png)
+##### [**el-table 表格合并**](https://linyisonger.github.io/H5.Examples/?name=./057.el-table%20表格合并.html) 
+![](./assets/preview/057.png)
+##### [**tesseract**](https://linyisonger.github.io/H5.Examples/?name=./058.tesseract.js%20图片转文字.html) 
+![](./assets/preview/058.png)
+##### [**Canvas 签名**](https://linyisonger.github.io/H5.Examples/?name=./059.Canvas%20签名.html) 
+![](./assets/preview/059.png)
+##### [**Canvas 手写单词识别**](https://linyisonger.github.io/H5.Examples/?name=./060.Canvas%20手写单词识别.html) 
+![](./assets/preview/060.png)
+##### [**音乐播放器**](https://linyisonger.github.io/H5.Examples/?name=./061.音乐播放器.html) 
+![](./assets/preview/061.png)
+##### [**百度地图 BMapGL点聚合**](https://linyisonger.github.io/H5.Examples/?name=./062.百度地图%20BMapGL点聚合.html) 
+![](./assets/preview/062.png)
+##### [**年度总结 Animate**](https://linyisonger.github.io/H5.Examples/?name=./063.年度总结%20Animate.css.html) 
+![](./assets/preview/063.png)
+##### [**2048**](https://linyisonger.github.io/H5.Examples/?name=./064.2048.html) 
+![](./assets/preview/064.png)
+##### [**el-table 表格宽度拖拽**](https://linyisonger.github.io/H5.Examples/?name=./065.el-table%20表格宽度拖拽.html) 
+![](./assets/preview/065.png)
+##### [**猜位置**](https://linyisonger.github.io/H5.Examples/?name=./066.猜位置.html) 
+![](./assets/preview/066.png)
+##### [**粒子扩散效果**](https://linyisonger.github.io/H5.Examples/?name=./067.粒子扩散效果.html) 
+![](./assets/preview/067.png)
+##### [**Cavnas 盒子连线**](https://linyisonger.github.io/H5.Examples/?name=./068.Cavnas%20盒子连线.html) 
+![](./assets/preview/068.png)
+##### [**table 表格合并**](https://linyisonger.github.io/H5.Examples/?name=./069.table%20表格合并.html) 
+![](./assets/preview/069.png)
+##### [**提取图片主题色**](https://linyisonger.github.io/H5.Examples/?name=./070.提取图片主题色.html) 
+![](./assets/preview/070.png)
 
 
 ### 开发
@@ -137,6 +171,15 @@ ls -R  *.html > examples.txt
 git add examples.txt
 ```
 
+新建示例文件
+```shell
+echo '' > "058.tesseract.js 文字识别.html"
+# 或者
+python .\build\new.py 思绪万千
+# 或者
+new 思绪万千
+```
+
 #### 示例截图
 
 执行以下命令之前需要配置
@@ -156,7 +199,18 @@ conda create --name h5-build-310 python==3.10
 # 切换环境
 conda activate h5-build-310
 # 安装依赖
-pip install -r requirements.txt -i https://pypi.douban.com/simple/
+pip install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/
 # 生成截图，但是有些截图可能存在问题，将其删除重新执行python index.py即可
 python index.py
 ```
+
+
+#### 打包new命令行
+```shell
+# 切换环境
+conda activate h5-build-310
+# 安装依赖
+pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyinstaller
+# 打包命令
+Pyinstaller -F 
+```

build/development.md

@@ -42,7 +42,7 @@ conda create --name h5-build-310 python==3.10
 # 切换环境
 conda activate h5-build-310
 # 安装依赖
-pip install -r requirements.txt -i https://pypi.douban.com/simple/
+pip install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/
 # 生成截图，但是有些截图可能存在问题，将其删除重新执行python index.py即可
 python index.py
 ```

build/index.py

@@ -17,7 +17,7 @@ async def screencut(url, no):
     await page.goto(url)
     await page.setViewport({'width': 1920, 'height': 1080})
     height = await page.evaluate('() => document.body.clientHeight')
-    time.sleep(1)
+    time.sleep(3)
     await page.setViewport({'width': 1920, 'height': height})
     await page.screenshot({'path': screencutImagePathTemplate.format(no)})
     await browser.close()