Zoom auf ein Foto in Leinwand mit Javascript

Question

Ich war auf der Suche nach ein paar Tagen, wie dieses Problem zu lösen, und ich beschloss, hier um Hilfe zu bitten. Die Sache ist, habe ich eine Leinwand, die 640x480px ist und vorgeladen es mit einem Bild. Nachdem ich mit der Maus den Bereich ausgewählt habe, der vergrößert werden soll (ich habe ein ziehbares Quadrat verwendet, den gleichen Typ, als würde man mit der Maus auf den Windows - Desktop klicken und mehrere Symbole auswählen), ändere ich den Arbeitsbereich auf 480x480px zoom ein Teil des Fotos ist ein Quadrat), und innerhalb dieser neuen Leinwand habe ich einen neuen gezoomten Teil dieses Fotos angezeigt.

Meine Frage ist: Da ich all das mache, kann ich auf jemandes Gesicht heranzoomen, damit ich einen Benutzer dazu bringen kann, Punkte auf Augen und Mund genauer zu platzieren (Gesichtserkennungssoftware wie Ding), wie kann ich real werden Koordinaten dieser Punkte? In Bezug auf ein Originalbild und Original-Leinwand, die 640x480px war.

Alles ist in reinem Javascript kein jQuery, und ohne js Bibliotheken

Danke

Answer 1

auf die gleiche Weise zwischen Fahrenheit und Celsius umwandeln würde: entscheiden, auf einen Referenzpunkt und passen Sie Ihre Waage. Der Bezugspunkt ist einfach: (0, 0) im gezoomten Kontext ist die obere linke Ecke des ausgewählten Bereichs im ursprünglichen Kontext. Konvertieren Sie für die Skalierung den vergrößerten Klickpunkt von Pixeln in Prozent. Ein Klick auf (120, 240) ist ein Klick auf (25%, 50%). Dann multiplizieren Sie diesen Prozentsatz mit der Größe des ausgewählten Bereichs und fügen den Referenzpunktversatz hinzu.

// Assume the user selected in the 640x480 canvas a 223x223 
// square whose upper left corner is (174, 36), 
let zoomArea = {x: 174, y: 36, size: 223}; 

// and then clicked (120, 260) in the new 480x480 canvas. 
let pointClicked = {x: 120, y: 260}; 

function getOriginalCoords(area, clicked) { 
    const ZOOMED_SIZE = 480; 

    // Get the coordinates of the clicked point in the zoomed 
    // area, on a scale of 0 to 1. 
    let clickedPercent = { 
    x: clicked.x/ZOOMED_SIZE, 
    y: clicked.y/ZOOMED_SIZE 
    }; 

    return { 
    x: clickedPercent.x * area.size + area.x, 
    y: clickedPercent.y * area.size + area.y 
    }; 
} 

console.log(getOriginalCoords(zoomArea, pointClicked)); 

Answer 2

Am Ende habe ich es auf diese Weise

// get bounding rect of canvas 
var rectangle = canvas.getBoundingClientRect(); 

// position of the point in respect to new 480x480 canvas 
var xPositionZoom = e.clientX - crosshairOffSet - rectangle.left; 
var yPositionZoom = e.clientY - crosshairOffSet - rectangle.top; 

// position of the point in respect to original 640x480 canvas 
var xPosition = rect.startX + (rect.w * (xPositionZoom/canvas.width)); 
var yPosition = rect.startY + (rect.h * (yPositionZoom/canvas.height));