本文详细介绍了将codepen上的mediapipe facelandmarker项目成功部署到本地环境的步骤。通过整合html、css和javascript代码到一个单一文件，并修正外部资源引用路径，解决了本地运行时遇到的问题，确保项目功能完整运行，为开发者提供了在本地调试和优化codepen项目的实用指南。
在前端开发中，CodePen等在线代码编辑器为快速原型开发和分享提供了极大便利。然而，当需要将这些项目迁移到本地环境进行更深入的开发、调试或部署时，可能会遇到一些挑战，尤其是当项目依赖于特定的构建流程或外部资源时。本文将以一个MediaPipe FaceLandmarker项目为例，详细阐述如何将一个CodePen项目成功地在本地运行起来。
核心问题分析
将CodePen项目直接复制到本地文件系统通常无法正常工作，主要原因有以下几点：
CSS预处理器依赖： CodePen支持Sass、Less等CSS预处理器。例如，@use “@material”; 这样的语法需要一个构建步骤来编译成标准CSS。直接复制到本地，浏览器无法识别。JavaScript模块导入机制： CodePen可能通过其内部机制或隐式地支持ES模块导入，但本地HTML文件直接使用 import … from “…” 语法时，需要确保导入路径是可解析的，并且通常需要完整的CDN链接或本地文件路径。资源路径问题： 许多CodePen项目依赖于外部CDN托管的库、字体、图片或机器学习模型文件。在本地运行时，这些路径必须是绝对的、可访问的URL。文件结构与链接： CodePen通常将HTML、CSS和JS分为独立面板。本地运行时，需要将它们正确地整合到一个HTML文件中，并确保CSS和JS文件被正确链接或内联。
本地化部署步骤
要成功在本地运行CodePen项目，我们需要对代码进行以下调整：
1. 整合代码结构
最简单且直接的方式是将HTML、CSS和JavaScript代码整合到一个单一的 index.html 文件中。
将CSS代码放入 标签内，放置在 部分。将JavaScript代码放入
2. 处理CSS预处理器与外部样式
原CodePen项目中的CSS可能包含 @use “@material”; 这样的Sass语法。在本地环境中，如果没有Sass编译器，浏览器将无法解析。解决方案是：
移除预处理器语法： 将 @use “@material”; 这样的行移除。引入标准CSS库： 如果项目依赖Material Design组件库，需要通过CDN链接引入其编译后的CSS文件。例如，在 中添加：
3. 修正JavaScript模块导入
CodePen中的JavaScript模块导入可能依赖于其环境。在本地运行ES模块时，需要确保导入路径是有效的URL。
使用完整的CDN路径： 将 import vision from “@mediapipe/tasks-vision”; 这样的导入语句替换为完整的CDN URL。例如：
import vision from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0";
请注意，原始答案中的 [email protected] 是经过邮件混淆处理的，实际应替换为 tasks-vision@0.10.0。
修正WASM文件路径： MediaPipe等库通常需要加载WebAssembly (WASM) 文件。FilesetResolver.forVisionTasks() 方法需要正确的WASM文件目录路径。确保其指向正确的CDN路径：
const filesetResolver = await FilesetResolver.forVisionTasks( "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm");
4. 确保所有外部资源可访问
检查HTML、CSS和JavaScript中所有对外部资源的引用，如图片 ( 的 src)、模型文件 (modelAssetPath) 等，确保它们都使用完整的、可公开访问的URL。
完整示例代码
以下是经过上述修正后，可在本地直接运行的MediaPipe FaceLandmarker项目代码：
Face Landmarker /* 移除 @use "@material"; */ body { font-family: helvetica, arial, sans-serif; margin: 2em; color: #3d3d3d; --mdc-theme-primary: #007f8b; --mdc-theme-on-primary: #f1f3f4; } h1 { font-style: italic; color: #ff6f00; color: #007f8b; } h2 { clear: both; } em { font-weight: bold; } video { clear: both; display: block; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } section { opacity: 1; transition: opacity 500ms ease-in-out; } header, footer { clear: both; } .removed { display: none; } .invisible { opacity: 0.2; } .note { font-style: italic; font-size: 130%; } .videoView, .detectOnClick, .blend-shapes { position: relative; float: left; width: 48%; margin: 2% 1%; cursor: pointer; } .videoView p, .detectOnClick p { position: absolute; padding: 5px; background-color: #007f8b; color: #fff; border: 1px dashed rgba(255, 255, 255, 0.7); z-index: 2; font-size: 12px; margin: 0; } .highlighter { background: rgba(0, 255, 0, 0.25); border: 1px dashed #fff; z-index: 1; position: absolute; } .canvas { z-index: 1; position: absolute; pointer-events: none; } .output_canvas { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .detectOnClick { z-index: 0; } .detectOnClick img { width: 100%; } .blend-shapes-item { display: flex; align-items: center; height: 20px; } .blend-shapes-label { display: flex; width: 120px; justify-content: flex-end; align-items: center; margin-right: 4px; } .blend-shapes-value { display: flex; height: 16px; align-items: center; background-color: #007f8b; }Face landmark detection using the MediaPipe FaceLandmarker task
import vision from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0"; const { FaceLandmarker, FilesetResolver, DrawingUtils } = vision; const demosSection = document.getElementById("demos"); const imageBlendShapes = document.getElementById("image-blend-shapes"); const videoBlendShapes = document.getElementById("video-blend-shapes"); let faceLandmarker; let runningMode = "IMAGE"; // Corrected type annotation syntax let enableWebcamButton; // Corrected type annotation syntax let webcamRunning = false; // Corrected type annotation syntax const videoWidth = 480; async function runDemo() { const filesetResolver = await FilesetResolver.forVisionTasks( "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm" ); faceLandmarker = await FaceLandmarker.createFromOptions(filesetResolver, { baseOptions: { modelAssetPath: `https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task`, delegate: "GPU" }, outputFaceBlendshapes: true, runningMode, numFaces: 1 }); demosSection.classList.remove("invisible"); } runDemo(); const imageContainers = document.getElementsByClassName("detectOnClick"); for (let i = 0; i = 0; i--) { const n = allCanvas[i]; n.parentNode.removeChild(n); } const faceLandmarkerResult = faceLandmarker.detect(event.target); const canvas = document.createElement("canvas"); canvas.setAttribute("class", "canvas"); canvas.setAttribute("width", event.target.naturalWidth + "px"); canvas.setAttribute("height", event.target.naturalHeight + "px"); canvas.style.left = "0px"; canvas.style.top = "0px"; canvas.style.width = `${event.target.width}px`; canvas.style.height = `${event.target.height}px`; event.target.parentNode.appendChild(canvas); const ctx = canvas.getContext("2d"); const drawingUtils = new DrawingUtils(ctx); for (const landmarks of faceLandmarkerResult.faceLandmarks) { drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_TESSELATION, { color: "#C0C0C070", lineWidth: 1 } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_RIGHT_EYE, { color: "#FF3030" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_RIGHT_EYEBROW, { color: "#FF3030" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_LEFT_EYE, { color: "#30FF30" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_LEFT_EYEBROW, { color: "#30FF30" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_FACE_OVAL, { color: "#E0E0E0" } ); drawingUtils.drawConnectors(landmarks, FaceLandmarker.FACE_LANDMARKS_LIPS, { color: "#E0E0E0" }); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_RIGHT_IRIS, { color: "#FF3030" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_LEFT_IRIS, { color: "#30FF30" } ); } drawBlendShapes(imageBlendShapes, faceLandmarkerResult.faceBlendshapes); } const video = document.getElementById("webcam"); const canvasElement = document.getElementById("output_canvas"); const canvasCtx = canvasElement.getContext("2d"); function hasGetUserMedia() { return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia); } if (hasGetUserMedia()) { enableWebcamButton = document.getElementById("webcamButton"); enableWebcamButton.addEventListener("click", enableCam); } else { console.warn("getUserMedia() is not supported by your browser"); } function enableCam(event) { if (!faceLandmarker) { console.log("Wait! faceLandmarker not loaded yet."); return; } if (webcamRunning === true) { webcamRunning = false; enableWebcamButton.innerText = "ENABLE PREDICTIONS"; } else { webcamRunning = true; enableWebcamButton.innerText = "DISABLE PREDICTIONS"; } const constraints = { video: true }; navigator.mediaDevices Demo: Detecting Images
Click on an image below to see the key landmarks of the face.
@@##@@Demo: Webcam continuous face landmarks detection
Hold your face in front of your webcam to get real-time face landmarker detection.Click enable webcam below and grant access to the webcam if prompted.
以上就是CodePen项目本地化部署指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537820.html
微信扫一扫 
支付宝扫一扫 
