邃芒智像大屏项目
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 

351 rinda
7.6 KiB

  1. <template>
  2. <div class="page">
  3. <div class="top">
  4. <div class="example">
  5. <div>文案与模板提示区域</div>
  6. </div>
  7. <div class="model">
  8. <img :src="modelUrl" alt="" />
  9. </div>
  10. </div>
  11. <div class="bottom">
  12. <video
  13. v-if="!isSuccess"
  14. id="video"
  15. muted
  16. autoplay="autoplay"
  17. :controls="false"
  18. ></video>
  19. <div v-if="!isSuccess">
  20. <div class="selectImg">
  21. <img src="../../assets/img/selectImg.png" />
  22. <div class="uploadText">上传照片</div>
  23. </div>
  24. <div id="action" @click="takePicture">
  25. <div class="circleInside"></div>
  26. </div>
  27. </div>
  28. <div v-if="isSuccess">
  29. <div class="selectImg">
  30. <img src="../../assets/img/selectImg.png" />
  31. <div class="uploadText">上传照片</div>
  32. </div>
  33. <div class="confirm" @click="confirmPhoto">
  34. <img src="../../assets/img/success.png" />
  35. <div class="uploadText">就这张了</div>
  36. </div>
  37. <div class="reTry" @click="reTry">
  38. <img src="../../assets/img/reTry.png" />
  39. <div class="uploadText">重新拍摄</div>
  40. </div>
  41. </div>
  42. <canvas
  43. v-if="isShowCanvas"
  44. id="canvas"
  45. style="width: 1530; height: 950"
  46. ></canvas>
  47. <div v-if="isSuccess" class="preview">
  48. <img :src="imgSrc" />
  49. </div>
  50. </div>
  51. <!-- Top section -->
  52. </div>
  53. </template>
  54. <script setup>
  55. import { ref, onMounted } from "vue";
  56. import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
  57. let imgSrc = ref("");
  58. let isSuccess = ref(false);
  59. let isShowCanvas = ref(true);
  60. let modelUrl = ref("");
  61. const startCamera = () => {
  62. function getUserMedia(constraints, success, error) {
  63. if (navigator.mediaDevices.getUserMedia) {
  64. //最新的标准API
  65. navigator.mediaDevices
  66. .getUserMedia({
  67. audio: {
  68. echoCancellation: true,
  69. },
  70. video: {
  71. facingMode: "user",
  72. },
  73. })
  74. .then(success)
  75. .catch(error);
  76. } else if (navigator.webkitGetUserMedia) {
  77. //webkit核心浏览器
  78. navigator.webkitGetUserMedia(constraints, success, error);
  79. } else if (navigator.mozGetUserMedia) {
  80. //firfox浏览器
  81. navigator.mozGetUserMedia(constraints, success, error);
  82. } else if (navigator.getUserMedia) {
  83. //旧版API
  84. navigator.getUserMedia(constraints, success, error);
  85. }
  86. }
  87. const video = document.querySelector("video.uni-video-video");
  88. let canvas = document.querySelector("canvas.uni-canvas-canvas");
  89. const action = document.querySelector("#action");
  90. let context = canvas.getContext("2d");
  91. function success(stream) {
  92. //兼容webkit核心浏览器
  93. let CompatibleURL = window.URL || window.webkitURL;
  94. //将视频流设置为video元素的源
  95. console.log(stream);
  96. //video.src = CompatibleURL.createObjectURL(stream);
  97. video.srcObject = stream;
  98. video.play();
  99. }
  100. function error(error) {
  101. console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
  102. }
  103. if (
  104. navigator.mediaDevices.getUserMedia ||
  105. navigator.getUserMedia ||
  106. navigator.webkitGetUserMedia ||
  107. navigator.mozGetUserMedia
  108. ) {
  109. //调用用户媒体设备, 访问摄像头
  110. getUserMedia(
  111. {
  112. audio: false,
  113. video: true,
  114. },
  115. success,
  116. error
  117. );
  118. } else {
  119. alert("不支持访问用户媒体");
  120. }
  121. action.addEventListener("click", function () {
  122. canvas.width = 1530;
  123. canvas.height = 950;
  124. context.drawImage(video, 0, 0);
  125. const dataURL = canvas.toDataURL("image/png");
  126. imgSrc.value = dataURL;
  127. setTimeout(() => {
  128. isShowCanvas.value = false;
  129. isSuccess.value = true;
  130. }, 10);
  131. });
  132. // 备用方案
  133. // action.addEventListener("click", function () {
  134. // context.drawImage(video, -50, -50, 310, 220);
  135. // const dataURL = canvas.toDataURL("image/png");
  136. // imgSrc.value = dataURL;
  137. // setTimeout(() => {
  138. // isShowCanvas.value = false;
  139. // isSuccess.value = true;
  140. // }, 10);
  141. // console.log(dataURL);
  142. // });
  143. };
  144. const takePicture = () => {
  145. console.log("Take Picture !");
  146. };
  147. const confirmPhoto = () => {};
  148. const reTry = () => {
  149. isSuccess.value = false;
  150. isShowCanvas.value = true;
  151. imgSrc.value = "";
  152. setTimeout(() => {
  153. startCamera();
  154. }, 10);
  155. };
  156. onLoad((options) => {
  157. console.log(options, "options");
  158. modelUrl.value = options.modelUrl;
  159. });
  160. onMounted(() => {
  161. console.log(this);
  162. startCamera();
  163. });
  164. </script>
  165. <style lang="scss" scoped>
  166. .page {
  167. width: 100vw;
  168. height: 100vh;
  169. padding: 0;
  170. .top {
  171. display: flex;
  172. width: 100%;
  173. height: 32%;
  174. .example {
  175. width: 60%;
  176. height: 100%;
  177. color: #000;
  178. background-color: #fff;
  179. }
  180. .model {
  181. position: relative;
  182. width: 40%;
  183. height: 100%;
  184. background-color: #000000;
  185. img {
  186. position: absolute;
  187. top: 50%;
  188. left: 50%;
  189. transform: translate(-50%, -50%);
  190. width: 100%;
  191. height: 100%;
  192. }
  193. }
  194. }
  195. .bottom {
  196. position: relative;
  197. width: 100%;
  198. height: 68%;
  199. video {
  200. width: 100%;
  201. height: 100%;
  202. }
  203. .selectImg {
  204. position: absolute;
  205. left: 65rpx;
  206. bottom: 75rpx;
  207. width: 68rpx;
  208. height: 68rpx;
  209. border: 5rpx solid #ffffff;
  210. border-radius: 5rpx;
  211. z-index: 99;
  212. img {
  213. position: absolute;
  214. left: 50%;
  215. bottom: 50%;
  216. transform: translate(-50%, 50%);
  217. width: 70%;
  218. height: 70%;
  219. }
  220. .uploadText {
  221. position: absolute;
  222. left: 50%;
  223. bottom: -40rpx;
  224. width: 150%;
  225. font-size: 20rpx;
  226. transform: translateX(-40%);
  227. }
  228. }
  229. #action {
  230. position: absolute;
  231. left: 50%;
  232. bottom: 45rpx;
  233. width: 120rpx;
  234. height: 120rpx;
  235. transform: translateX(-50%);
  236. background-color: #ffffff;
  237. border-radius: 60rpx;
  238. z-index: 99;
  239. .circleInside {
  240. position: absolute;
  241. left: 50%;
  242. bottom: 50%;
  243. transform: translate(-50%, 50%);
  244. width: 100rpx;
  245. height: 100rpx;
  246. background-color: #ffffff;
  247. border-radius: 50%;
  248. border: 6rpx solid #000;
  249. }
  250. }
  251. .confirm {
  252. position: absolute;
  253. left: 50%;
  254. bottom: 75rpx;
  255. width: 80rpx;
  256. height: 80rpx;
  257. // border: 5rpx solid #ffffff;
  258. transform: translateX(-50%);
  259. border-radius: 60rpx;
  260. z-index: 99;
  261. img {
  262. position: absolute;
  263. left: 50%;
  264. bottom: 50%;
  265. transform: translate(-50%, 50%);
  266. width: 100%;
  267. height: 100%;
  268. }
  269. .uploadText {
  270. position: absolute;
  271. left: 50%;
  272. bottom: -40rpx;
  273. width: 150%;
  274. font-size: 20rpx;
  275. transform: translateX(-32%);
  276. }
  277. }
  278. .reTry {
  279. position: absolute;
  280. right: 65rpx;
  281. bottom: 75rpx;
  282. width: 68rpx;
  283. height: 68rpx;
  284. border: 5rpx solid #ffffff;
  285. border-radius: 5rpx;
  286. z-index: 99;
  287. img {
  288. position: absolute;
  289. left: 50%;
  290. bottom: 50%;
  291. transform: translate(-50%, 50%);
  292. width: 70%;
  293. height: 70%;
  294. }
  295. .uploadText {
  296. position: absolute;
  297. left: 50%;
  298. bottom: -40rpx;
  299. width: 150%;
  300. font-size: 20rpx;
  301. transform: translateX(-40%);
  302. }
  303. }
  304. .preview {
  305. position: relative;
  306. width: 100%;
  307. height: 100%;
  308. z-index: 1;
  309. img {
  310. position: absolute;
  311. top: 110rpx;
  312. width: 120%;
  313. height: 60%;
  314. }
  315. }
  316. }
  317. }
  318. </style>