فریم عینک طبی مردانه

###

✦ این عینک رو روی صورتم امتحان کن

</button>

</div>

<b>پرو مجازی عینک | عینک۷۵تومنی</b>

</div>

<p>عکس صورتت رو انتخاب کن یا دوربین سلفی رو روشن کن.</p>

انتخاب عکس

</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>

<p id="evto-status" style="font-size:13px;color:#555">در حال آماده‌سازی...</p>

<label>اندازه عینک

</label>

<label>جابجایی عمودی

</label>

<button id="evto-save" style="width:100%;padding:14px;background:#087e72;color:white;border:0;border-radius:9px;margin-top:12px">ذخیره عکس نتیجه</button>

</div>

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>

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>

جستجو در نتایج

ارتباط با ما