7

我正在使用上下文混合器对具有固定颜色的 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 左右的值。

编辑：

我正在使用 background-size: 覆盖 css 来创建背景图像

编辑2：

我创建了一个小提琴来说明这个问题。如果您取消注释该行//cHeight *= magicConstant;，裁剪后的图像看起来会好很多，但事情就没有意义了。我删除了提琴手的乘法效果，但这并不是重现问题所必需的。我还注意到，如果我从 URL 中删除第二个画布，行为会发生变化。

顺便说一句，这种行为发生在 google chrome 上，但我认为同样的事情也发生在 safari 和 firefox 上。

4

2 回答 2

5

好的，我已经修好了。男人就是这么难！主要是因为你忘了设置 imageCanvas 的画布高度。图像有白色边框也无济于事。我花了很多时间试图弄清楚填充的来源。

所以首先，对于fiddle的情况，在 function 中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 维度乘以某个比例因子来缩放图像。这就是你如何保持纵横比。比例因子将是使图像的高度与窗口的高度匹配的比例因子和使图像的宽度与窗口的宽度匹配的比例因子中的较大者。

于 2012-04-23T03:43:45.373 回答
1

我认为在这里使用窗口内部尺寸可能对您无效。由于封面将保持背景图像的纵横比，这意味着它的两个尺寸可能都不会完全显示。因此，如果您尝试在纵横比之间进行转换以确定剪辑的位置，则必须考虑图像可能会流出窗口边界的事实。

于 2012-04-18T03:24:52.403 回答