کیف_بند
#75tomani #عینک #عینکافتابی #عینکدودی #عینک۷۵تومنی عینک_آفتابی عینک_زنانه عینک_مردانه عینک_طبی عینک۷۵تومَنی عینک۷۵تومنی عینک
<div id="evto-launch-wrap" style="display:none;margin:12px 0">
<button id="evto-open" style="width:100%;padding:15px;background:#087e72;color:white;border:0;border-radius:12px;font-size:16px;font-weight:bold">
✦ این عینک رو روی صورتم امتحان کن
</button>
</div>
<div id="evto-modal" style="display:none;position:fixed;inset:0;background:#000e;z-index:999999;overflow:auto;direction:rtl">
<div style="background:white;color:#222;max-width:650px;margin:4vh auto;padding:15px;border-radius:15px;width:92%;box-sizing:border-box">
<div style="display:flex;justify-content:space-between;align-items:center">
<b>پرو مجازی عینک | عینک۷۵تومنی</b>
<button id="evto-close" style="font-size:25px;border:0;background:none">×</button>
</div>
<p>عکس صورتت رو انتخاب کن یا دوربین سلفی رو روشن کن.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin:12px 0">
<label style="background:#087e72;color:white;padding:12px;border-radius:8px">
انتخاب عکس
<input id="evto-file" type="file" accept="image/*" hidden>
</label>
<button id="evto-camera" style="padding:12px;border:0;border-radius:8px;background:#222;color:white">دوربین سلفی</button>
<button id="evto-stop" style="padding:12px;border:0;border-radius:8px">خاموش کردن دوربین</button>
</div>
<video id="evto-video" autoplay playsinline muted style="display:none;width:100%;border-radius:10px"></video>
<canvas id="evto-canvas" style="width:100%;border-radius:10px;background:#eee"></canvas>
<p id="evto-status" style="font-size:13px;color:#555">در حال آماده‌سازی...</p>
<label>اندازه عینک
<input id="evto-size" type="range" min="60" max="150" value="100" style="width:100%">
</label>
<label>جابجایی عمودی
<input id="evto-y" type="range" min="-80" max="80" value="0" style="width:100%">
</label>
<button id="evto-save" style="width:100%;padding:14px;background:#087e72;color:white;border:0;border-radius:9px;margin-top:12px">ذخیره عکس نتیجه</button>
</div>
</div>
<script type="module">
import {FaceLandmarker,FilesetResolver}
from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/+esm";
(async()=>{
const $=id=>document.getElementById(id);
const modal=$("evto-modal"),canvas=$("evto-canvas");
const ctx=canvas.getContext("2d");
const status=$("evto-status");
const video=$("evto-video");
let landmarker=null,face=null,glasses=null,stream=null;
let manualY=0,scale=1,raf=0,angle=0;
if(!location.pathname.includes("/product/"))return;
const productImage=
document.querySelector('meta[property="og:image"]')?.content ||
document.querySelector('.product img')?.src ||
document.querySelector('main img')?.src;
if(!productImage)return;
glasses=new Image();
glasses.crossOrigin="anonymous";
glasses.src=productImage;
const wrap=$("evto-launch-wrap");
wrap.style.display="block";
const anchor=document.querySelector('form[action*="cart"]') ||
document.querySelector('.product') ||
document.querySelector('main');
if(anchor)anchor.parentNode.insertBefore(wrap,anchor);
$("evto-open").onclick=()=>{modal.style.display="block";};
$("evto-close").onclick=closeModal;
function closeModal(){
modal.style.display="none";
stopCamera();
}
async function setup(){
if(landmarker)return;
status.textContent="در حال بارگذاری تشخیص چهره...";
const vision=await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm"
);
landmarker=await FaceLandmarker.createFromOptions(vision,{
baseOptions:{
modelAssetPath:"https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",
delegate:"CPU"
},
runningMode:"VIDEO",
numFaces:1
});
status.textContent="آماده پرو مجازی هستیم.";
}
function render(source,w,h){
canvas.width=w;canvas.height=h;
ctx.clearRect(0,0,w,h);
ctx.drawImage(source,0,0,w,h);
if(!landmarker||!glasses.complete||!glasses.naturalWidth)return;
const result=landmarker.detectForVideo(source,performance.now());
if(!result.faceLandmarks?.length){
status.textContent="صورت پیدا نشد؛ روبه‌روی دوربین قرار بگیر.";
return;
}
const p=result.faceLandmarks[0];
const left=p[33],right=p[263];
const nose=p[168];
const x1=left.x*w,y1=left.y*h;
const x2=right.x*w,y2=right.y*h;
const width=Math.hypot(x2-x1,y2-y1)*2.45*scale;
const height=width*glasses.naturalHeight/glasses.naturalWidth;
const cx=(x1+x2)/2;
const cy=(y1+y2)/2+manualY;
const rotation=Math.atan2(y2-y1,x2-x1);
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(rotation);
ctx.globalCompositeOperation="multiply";
ctx.drawImage(glasses,-width/2,-height/2,width,height);
ctx.restore();
status.textContent="عینک روی صورت قرار گرفت. اندازه و موقعیت را تنظیم کن.";
}
$("evto-size").oninput=e=>{scale=e.target.value/100;if(face)render(face,face.naturalWidth,face.naturalHeight);};
$("evto-y").oninput=e=>{manualY=Number(e.target.value);if(face)render(face,face.naturalWidth,face.naturalHeight);};
$("evto-file").onchange=async e=>{
stopCamera();
const file=e.target.files[0];
if(!file)return;
await setup();
const url=URL.createObjectURL(file);
face=new Image();
face.onload=()=>render(face,face.naturalWidth,face.naturalHeight);
face.src=url;
};
$("evto-camera").onclick=async()=>{
try{
await setup();
stopCamera();
stream=await navigator.mediaDevices.getUserMedia({
video:{facingMode:"user"},audio:false
});
video.srcObject=stream;
video.style.display="block";
await video.play();
canvas.style.display="none";
const loop=()=>{
if(!stream)return;
const w=video.videoWidth,h=video.videoHeight;
if(w&&h){
canvas.style.display="block";
render(video,w,h);
}
raf=requestAnimationFrame(loop);
};
loop();
}catch(e){status.textContent="دسترسی دوربین ممکن نیست. مجوز دوربین را فعال کن."; }
};
function stopCamera(){
if(raf)cancelAnimationFrame(raf);
if(stream)stream.getTracks().forEach(t=>t.stop());
stream=null;
video.srcObject=null;
video.style.display="none";
}
$("evto-stop").onclick=()=>{
stopCamera();
status.textContent="دوربین خاموش شد.";
};
$("evto-save").onclick=()=>{
try{
const a=document.createElement("a");
a.download="75tomani-virtual-tryon.png";
a.href=canvas.toDataURL("image/png");
a.click();
}catch(e){
status.textContent="ذخیره تصویر ممکن نشد.";
}
};
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (location.pathname.indexOf('/product/') === -1) return;
var btn = document.createElement('button');
btn.innerHTML = '✦ پرو مجازی عینک';
btn.style.cssText =
'display:block;width:100%;padding:16px;background:#087e72;color:white;border:0;border-radius:12px;font-size:17px;margin:15px 0;';
btn.onclick = function () {
alert('پرو مجازی عینک۷۵تومنی فعال شد!');
};
var target = document.querySelector('main');
if (target) target.prepend(btn);
});
</script>