我正在使用context-blender对带有固定颜色的html背景图像的前192个像素应用乘法效果,以实现对页面标题的透明效果。
在html上我有2个画布。一个用于图像的一部分以应用乘法效果,一个用于颜色。
在javascript上,将color-canvas的颜色和两个canvas的宽度设置为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上创建背景图像
EDIT2:
我创建了一个fiddle来说明问题。如果您取消注释行//cHeight *= magicConstant;
,裁剪后的图像看起来要好得多,但事情就没有意义了。我删除了小提琴手的多重效果,但不需要重现问题。我还注意到,如果我从URL中删除第二个画布,行为就会改变。
答案 0 :(得分:5)
首先,对于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维度乘以某个比例因子来缩放图像。这就是保持宽高比的方法。比例因子将是使图像的高度与窗口的高度匹配的那个中的较大者,以及使图像的宽度与窗口的宽度匹配的那个。
答案 1 :(得分:1)
我认为在这里使用窗口内部尺寸可能无效。由于封面将保持背景图像的纵横比,这意味着它的两个尺寸可能无法完全显示。因此,如果您尝试在宽高比之间进行转换以确定剪裁位置,则必须考虑到图像可能会流出窗口边界的事实。