html5圖像裁剪

Question

我使用context-blender以固定顏色對html背景圖像的前192個像素應用多重效果，以實現頁面標題上的透明效果。

在html上我有2個畫布。一個用於圖像的部分以應用乘法效果，另一個用於顏色。

在JavaScript中，我與得到的背景圖像顏色的帆布的顏色和兩個畫布寬度設置爲window.innerWidth後：

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

現在問題來了。我想繪製圖像的裁剪圖像到圖像畫布，以便我可以應用乘法效果。我試圖做到以下幾點：

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

但我做錯了，得到裁剪的高度。

例：對於一個1536x1152圖像和1293x679瀏覽器的容器中，我得到了源中值裁剪高度是230，但以獲得正確的作物我需要用的東西約296

編輯：

我使用的背景大小：蓋在CSS創建背景圖像

EDIT2：

我創建了一個fiddle來說明問題。如果取消註釋//cHeight *= magicConstant;這一行，裁剪的圖像看起來好多了，但事情沒有意義。我刪除了對提琴手的乘法效果，但這不是重現問題所必需的。我還注意到，如果從URL中刪除第二個畫布，行爲會發生變化。

順便說一句，這種行爲發生在谷歌鉻，但我認爲同樣的事情發生在Safari和Firefox。

Answer 1

好的，我修好了。人是那麼辛苦！主要是因爲你忘了設置imageCanvas的畫布高度。它也沒有幫助，圖像有一個白色的邊框。我花了很多時間試圖弄清楚填充是從哪裏來的。

所以要開始，對於fiddle的情況下，在功能doBlending()，設置imageCanvas.canvas.height = height;

然後在crop()計算需要覆蓋2點的可能性。圖像的高度是否縮放並在左側截斷或縮放爲寬度並在底部截斷？我不會寫都適合你，但這裏的一個內進行縮放的高度的情況下：

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

我真的不知道，你想出了在你的榜樣的比例因子。圖像將通過將x和y兩個維度乘以一些比例因子來進行縮放。這就是你保持高寬比的方法。比例因子將是使圖像高度與窗口高度相匹配的比例因子中較大的一個，並使圖像寬度與窗口寬度匹配。

Answer 2

我認爲在這裏使用窗口內部尺寸可能無效。由於封面將保持背景圖像的縱橫比，這意味着它的兩個尺寸可能無法完全顯示。因此，如果您嘗試在高寬比之間進行轉換以確定剪輯的位置，則必須考慮圖像可能流出窗口邊界的事實。