html5 Bild beschneiden

Question

Ich verwende context-blender, um einen Multiplikationseffekt auf die ersten 192 Pixel des HTML-Hintergrundbildes mit einer festen Farbe anzuwenden, um einen Transparenzeffekt auf den Kopf der Seite zu erzielen.

Auf der html habe ich 2 Leinwand. Eine für den Teil des Bildes, um den Multiplikationseffekt und einen für die Farbe anzuwenden.

Auf dem Javascript, nachdem die Farbe der Farb Leinwand und die Breite der beide Leinwand auf den window.innerWidth Einstellung ich das Hintergrundbild immer mit:

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

Jetzt kommt das Problem. Ich möchte ein zugeschnittenes Bild auf das Bild auf die Leinwand malen, damit ich den Multiplikationseffekt anwenden kann. Ich versuche Folgendes zu tun:

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'); 
} 

Aber ich mache etwas falsch, die abgeschnittene Höhe zu bekommen.

Ex: Für eine 1536x1152 Bild und einem 1293x679 Browser Container, der Wert ich für die Quelle immer abgeschnitten Höhe 230 ist aber die richtige Ernte zu bekommen ich etwas um 296.

Bearbeiten verwenden müssen:

ich bin mit Hintergrund-size: Abdeckung auf dem CSS-

EDIT2 das Hintergrundbild zu erstellen:

Ich habe eine fiddle erstellt, um das Problem zu veranschaulichen. Wenn Sie die Zeile //cHeight *= magicConstant; auskommentieren, sieht das zugeschnittene Bild viel besser aus, aber die Dinge machen keinen Sinn mehr. Ich entfernte den Multiplikationseffekt auf dem Geiger, aber das ist nicht erforderlich, um das Problem zu reproduzieren. Ich bemerkte auch, dass sich das Verhalten änderte, wenn ich die zweite Leinwand von der URL entferne.

Btw, dieses Verhalten passiert mit Google Chrome, aber ich denke, das gleiche passiert auf Safari und Firefox.

Answer 1

OK, ich habe es behoben. Mann war so schwer! Hauptsächlich, weil Sie vergessen haben, die Canvas-Höhe von imageCanvas zu setzen. Es half auch nicht, dass das Bild einen weißen Rand hat. Ich verbrachte eine verdammt lange Zeit damit, herauszufinden, woher die Polsterung kam.

So beginnen, für den Fall der fiddle, in Funktion doBlending(), Set imageCanvas.canvas.height = height;

Dann 2 Möglichkeiten decken die Berechnungen in crop() müssen. Wird das Bild auf Höhe skaliert und auf der linken Seite abgeschnitten oder auf Breite skaliert und auf der Unterseite abgeschnitten? Ich bin nicht beide gehen für Sie zu schreiben, aber hier ist der, für den Fall, dass es für die Höhe skaliert:

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); 
} 

ich wirklich keine Ahnung, wo man mit den Skalierungsfaktoren in Ihrem Beispiel kam.Das Bild wird skaliert, indem die Dimensionen x und y mit einem Skalierungsfaktor multipliziert werden. So behalten Sie das Seitenverhältnis bei. Der Skalierungsfaktor wird größer, um die Höhe des Bildes mit der Höhe des Fensters und die Breite des Bildes mit der Breite des Fensters übereinzustimmen.

Answer 2

Ich denke, es ist möglicherweise nicht gültig für Sie, Fensterinnenmaße hier zu verwenden. Da die Abdeckung das Seitenverhältnis des Hintergrundbilds beibehält, bedeutet dies, dass beide Abmessungen möglicherweise nicht vollständig angezeigt werden. Wenn Sie also versuchen, zwischen den Seitenverhältnissen zu transformieren, um zu bestimmen, wo Sie den Clip abschneiden möchten, müssen Sie berücksichtigen, dass das Bild möglicherweise aus den Fensterrändern herausfließt.