我正在使用
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,imageObj.width,croppedHeight,window.innerWidth,192);
// apply the multiply effect
colorCanvas.blendOnto( imageCanvas,'multiply');
}
但是我做错了得到裁剪的高度.
例如：对于1536×1152图像和1293×679浏览器容器,我得到的源剪裁高度的值是230,但要获得正确的裁剪我需要使用296左右的东西.
编辑：
我在css上使用background-size：cover来创建背景图像
EDIT2：
我创建了一个fiddle来说明问题.如果取消注释// cHeight * = magicConstant;裁剪后的图像看起来好多了,但事情就没有意义了.我删除了小提琴手的多重效果,但不需要重现问题.我还注意到,如果从URL中删除第二个画布,行为也会改变.
顺便说一句,这种行为发生在谷歌浏览器,但我认为同样的事情发生在safari和Firefox上.
解决方法
好的,我修好了.男人那么难！主要是因为你忘了设置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,targetWidth * scale,targetHeight * scale,targetWidth,targetHeight);
}
我真的不知道你在哪里提出了你的例子中的缩放因子.通过将x和y维度乘以某个比例因子来缩放图像.这就是你如何保持纵横比.比例因子将是使图像的高度与窗口的高度匹配的那个中的较大者,以及使图像的宽度与窗口的宽度匹配的那个.
