Cắt xén hình ảnh html5

Question

Tôi đang sử dụng context-blender để áp dụng hiệu ứng nhân trên 192 pixel đầu tiên của hình nền html với màu cố định để đạt được hiệu ứng trong suốt trên tiêu đề của trang.

Trên html, tôi có 2 canvas. Một phần cho hình ảnh để áp dụng hiệu ứng nhân và một cho màu sắc.

Trên javascript, sau khi cài đặt màu sắc của màu vải và độ rộng của cả vải đến window.innerWidth tôi nhận được hình nền với:

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

Bây giờ đến vấn đề này. Tôi muốn vẽ một hình ảnh đã cắt vào hình ảnh với khung hình ảnh để tôi có thể áp dụng hiệu ứng nhân. Tôi đang cố gắng thực hiện những việc sau:

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

Nhưng tôi đang làm sai điều gì đó khi nhận được chiều cao cắt.

Ex: Đối với một hình ảnh 1536x1152 và một container trình duyệt 1293x679, giá trị tôi nhận được cho các nguồn cắt chiều cao là 230 nhưng để có được những cây trồng chính xác tôi cần phải sử dụng một cái gì đó xung quanh 296.

Chỉnh sửa:

tôi đang sử dụng nền-size: bìa trên css để tạo background-image

Edit2:

Tôi đã tạo một fiddle để minh họa sự cố. Nếu bạn bỏ ghi chú dòng //cHeight *= magicConstant; hình ảnh được cắt trông sẽ đẹp hơn nhiều nhưng mọi thứ sẽ không có ý nghĩa. Tôi đã loại bỏ hiệu ứng nhân trên fiddler nhưng không bắt buộc phải tái tạo vấn đề. Tôi cũng nhận thấy rằng hành vi đã thay đổi nếu tôi xóa canvas thứ hai khỏi URL.

Btw, hành vi này đã xảy ra với google chrome, nhưng tôi nghĩ điều tương tự cũng xảy ra trên safari và firefox.

Answer 1

OK, tôi đã sửa nó. Con người thật khó! Chủ yếu là vì bạn quên đặt chiều cao canvas của imageCanvas. Nó cũng không giúp hình ảnh có đường viền màu trắng. Tôi đã dành rất nhiều thời gian cố gắng tìm ra nơi mà padding đến từ đó.

Vì vậy, để bắt đầu, đối với trường hợp của fiddle, trong chức năng doBlending(), thiết imageCanvas.canvas.height = height;

Sau đó, các tính toán trong crop() cần phải bao gồm 2 khả năng. Hình ảnh có được chia tỷ lệ cho chiều cao và cắt ngắn ở bên trái hoặc thu nhỏ cho chiều rộng và cắt ngắn ở dưới cùng không? Tôi sẽ không viết cả cho bạn, nhưng đây là một trong những đối với trường hợp nơi nó được nhân rộng cho chiều cao:

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

tôi thực sự không có ý tưởng mà bạn đã đưa ra những yếu tố rộng trong ví dụ của bạn.Hình ảnh sẽ được thu nhỏ bằng cách nhân cả kích thước x và y bởi một số yếu tố tỷ lệ. Đó là cách bạn duy trì tỷ lệ khung hình. Các yếu tố quy mô sẽ lớn hơn của một để làm cho chiều cao của hình ảnh phù hợp với chiều cao của cửa sổ và một để làm cho chiều rộng của hình ảnh phù hợp với chiều rộng của cửa sổ.

Answer 2

Tôi nghĩ rằng nó có thể không hợp lệ để bạn sử dụng kích thước bên trong cửa sổ ở đây. Vì bìa sẽ duy trì tỷ lệ khung hình của hình nền, điều này có nghĩa là cả hai chiều của nó có thể không được hiển thị đầy đủ. Vì vậy, nếu bạn đang cố gắng chuyển đổi giữa các tỷ lệ khung hình để xác định nơi để cắt, bạn sẽ phải tính đến thực tế là hình ảnh có thể chảy ra khỏi biên giới cửa sổ.