新增生成视频功能

3 years ago · 4a30296567
parent 41c5a28200
commit 4a30296567
4 changed files with 94 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -20,6 +20,7 @@
 	<link rel="stylesheet" href="static/app/css/wallet.css">
 	<script type="text/javascript" src="static/app/js/common.bundle.js"></script>
 	<script type="text/javascript" src="static/app/js/chat.bundle.js"></script>
+	<script src="static/app/js/html2canvas.min.js"></script>
 </head>
 <body>
 	<div id="vueApp" class="wrapper">
@ -109,7 +110,7 @@
 						<!-- 对话设置 -->
 						<div class="tab-pane" id="tabContent2">
 							<div class="dialog-user">
-								<div class="dialog-user-title">编辑和选择用户（<font>第一个用户默认是自己</font>）</div>
+								<div class="dialog-user-title">编辑和选择用户（<font>第一个用户默认是自己，点击头像可更换头像哦</font>）</div>
 								<div class="dialog-user-items">
 									<div class="dialog-user-item el-remove">
 										<div class="dialog-user-face">
@ -245,13 +246,16 @@
 									</div>
 									<button class="btn-clear" @click="cleanDialogs" href="javascript:;">清空聊天内容</button>
 									<button class="btn-clear" @click="save" href="javascript:;">生成图片</button>
+									<div style="margin-top: 20px;">生成视频功能: 点击下方的"开始录制"按钮即可录制视频（停止录制后会在右侧生成视频，您可以下载该视频）</div>
+									<button class="btn-recording" id="btn-start-recording" style="background-color: null;">开始录制</button>
+									<button class="btn-recording" id="btn-stop-recording" disabled>停止录制</button>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
 				<!-- phone -->
-				<div class="phone-wrap">
+				<div class="phone-wrap" id="element-to-record">
 					<div class="phone-content">
 						<div id="phone" class="phone">
 							<div class="phone-top">
@ -558,10 +562,13 @@
 						</div>
 					</div>
 				</div>
+				<div style="display: none; margin-left: 10px;">
+					<video controls autoplay playsinline id="preview-video"></video>
+				</div>
+				<canvas id="background-canvas" style="position: absolute; left: -99999px;"></canvas>
 			</div>
 		</div>
 	</div>
 	<a style="display: none;" id="lightBoxToggle" href="javascript:;" data-width="300" data-caption="右击图片，点击图片另存为即可下载图片">生成图片</a>
 </body>
-
 </html>
--- a/static/app/css/app.css
+++ b/static/app/css/app.css
@ -1,3 +1,9 @@
+/*!
+ * project：在线微信聊天生成器，抖音微信聊天搞笑视频制作神器
+ * author：追风少年
+ * 开源地址：https://gitee.com/lifeixue/weixin-chat
+ * 抖音号：peng071121
+ */
@import 'jquery.range.css';
 body,
 html {
@ -1399,7 +1405,7 @@ fieldset[disabled] .radio-custom label {

 .edit-content {
    display: flex;
-    padding-bottom: 100px
+    /* padding-bottom: 100px */
 }

 .tab {
@ -1412,8 +1418,8 @@ fieldset[disabled] .radio-custom label {
 }

 .phone-wrap {
-    width: 375px;
-    height: 812px
+    width: 390px;
+    height: 844px;
 }

 .phone-content {
@ -1423,8 +1429,8 @@ fieldset[disabled] .radio-custom label {
 }

 .phone {
-    width: 1125px;
-    height: 2436px;
+    width: 1170px;
+    height: 2532px;
    background-color: #ededed;
    position: relative;
    z-index: 998;
@ -1683,7 +1689,11 @@ fieldset[disabled] .radio-custom label {
    color: #fff;
    border-radius: 3px;
 }
-
+.btn-recording {
+    padding: 5px 20px;
+    border-radius: 3px;
+    margin-top: 10px;
+}
 .wechat-bottom {
    display: flex;
    align-items: center;
--- a/static/app/js/chat.bundle.js
+++ b/static/app/js/chat.bundle.js
--- a/static/app/js/html2canvas.min.js
+++ b/static/app/js/html2canvas.min.js