html5 image cropping

Question

Sto usando context-blender per applicare un effetto moltiplicativo sui primi 192 pixel dell'immagine di sfondo html con un colore fisso per ottenere un effetto di trasparenza sull'intestazione della pagina.

Sul html ho 2 tele. Uno per la parte dell'immagine per applicare l'effetto moltiplica e uno per il colore.

In javascript, dopo aver impostato il colore del colore-tela e la larghezza di entrambi tela per la window.innerWidth sto ottenendo l'immagine di sfondo con:

imageObj.src = $('html').css('background-image').replace(/^url|[\(\)]/g, ''); 

Ora arriva il problema. Voglio disegnare un'immagine ritagliata all'immagine sul canvas dell'immagine in modo da poter applicare l'effetto moltiplicare. Sto cercando di fare quanto segue:

imageObj.onload = function(){ 
    // getting the background-image height 
    var imageHeight = window.innerWidth * imageObj.height/imageObj.width; 

    // get the corresponding pixels of the source image that correspond to the first 192 pixels of the background-image 
    var croppedHeight = 192 * imageObj.height/imageHeight; 

    // draw the image to the canvas 
    imageCanvas.drawImage(imageObj, 0, 0, imageObj.width, croppedHeight, 0, 0, window.innerWidth, 192); 

    // apply the multiply effect 
    colorCanvas.blendOnto(imageCanvas, 'multiply'); 
} 

Ma sto facendo qualcosa di sbagliato ottenendo l'altezza ritagliata.

Es: Per un'immagine 1536x1152 e un contenitore del browser 1293x679, il valore sto diventando la fonte ritagliata altezza è di 230, ma per ottenere il raccolto corretta ho bisogno di usare qualcosa intorno a 296.

Edit:

sto usando background-size: copertura sul css per creare l'immagine di sfondo

Edit2:

Ho creato uno fiddle per illustrare il problema. Se disattivi la riga //cHeight *= magicConstant;, l'immagine ritagliata è molto migliore ma le cose non hanno più senso. Ho rimosso l'effetto moltiplicatore sul violinista ma non è necessario riprodurre il problema. Ho anche notato che il comportamento è cambiato se rimuovo il secondo canvas dall'URL.

Btw, questo comportamento si è verificato con google chrome, ma penso che la stessa cosa avvenga in Safari e Firefox.

Answer 1

OK, l'ho risolto. L'uomo era così difficile! Principalmente perché ti sei dimenticato di impostare l'altezza della tela di imageCanvas. Inoltre non ha aiutato che l'immagine abbia un bordo bianco. Ho passato un sacco di tempo cercando di capire da dove provenisse il padding.

Quindi, per iniziare, per il caso del fiddle, nella funzione doBlending(), impostare imageCanvas.canvas.height = height;

Poi i calcoli in crop() necessità di coprire 2 possibilità. L'immagine viene ridimensionata per l'altezza e troncata a sinistra o ridimensionata per la larghezza e troncata sul fondo? Non ho intenzione di scrivere sia per voi, ma qui è quello per il caso in cui esso viene scalato in altezza:

function crop(imageObj, imageCanvas, colorCanvas) { 
    // Assumes bg image is scaled for hight 
    var scale = imageObj.height/window.innerHeight; 
    var targetHeight = imageCanvas.canvas.height; 
    var targetWidth = window.innerWidth; 

    imageCanvas.drawImage(imageObj, 
          0, 0, targetWidth * scale, targetHeight * scale, 
          0, 0, targetWidth, targetHeight); 
} 

ho davvero idea di dove si avvicinò con i fattori di scala nel tuo esempio.L'immagine verrà ridimensionata moltiplicando le dimensioni xey per un fattore di scala. Ecco come si preservano le proporzioni. Il fattore di scala sarà il più grande di uno per rendere l'altezza dell'immagine corrispondente all'altezza della finestra e quella per fare in modo che la larghezza dell'immagine corrisponda alla larghezza della finestra.

Answer 2

Penso che potrebbe non essere valido per voi utilizzare qui le dimensioni interne della finestra. Poiché la copertina manterrà le proporzioni dell'immagine di sfondo, significa che entrambe le sue dimensioni potrebbero non essere visualizzate completamente. Quindi, se stai cercando di trasformare tra i rapporti di aspetto per determinare dove tagliare, dovresti tenere conto del fatto che l'immagine potrebbe fuoriuscire dai bordi della finestra.