html5图像裁剪

我使用context-blender以固定颜色对html背景图像的前192个像素应用多重效果，以实现页面标题上的透明效果。html5图像裁剪

在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。

来源

2012-04-12 dcarneiro

你能在jsfiddle.net上创建一个例子吗？可以帮助我们为你提供一个答案。此外，行为（获得230像素vs 296像素）在多个浏览器中是否一致？ – 2012-04-16 11:24:56

@MarcGagne我在问题 – dcarneiro 2012-04-16 16:25:56

好的，我修好了。人是那么辛苦！主要是因为你忘了设置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两个维度乘以一些比例因子来进行缩放。这就是你保持高宽比的方法。比例因子将是使图像高度与窗口高度相匹配的比例因子中较大的一个，并使图像宽度与窗口宽度匹配。

来源

2012-04-23 03:43:45

白色边框是因为小提琴（我认为）。在原始代码中，没有白色边框。这里的情况总是匹配背景图像的宽度并截断底部以获得192px的高度。我想我确实使事情复杂化了很多。 – dcarneiro 2012-04-23 16:38:14

白色边框是存储在bittbox上的[图像]（http://www.bittbox.com/wp-content/uploads/2007/02/vector_perforated_metal_pattern.png）的一部分。使用小提琴时，如果结果区域的宽高比（宽度/高度）小于源图像的“盖子”方式，则匹配宽度不起作用。 – 2012-04-23 16:45:46

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

来源

2012-04-18 03:24:52

上添加了示例在我的代码中，我确保图像足够长，以便覆盖物将图像拉伸以匹配窗口宽度。然后我应用3个简单的规则来获取图像高度。 – dcarneiro 2012-04-18 08:48:19

html5图像裁剪

回答

相关问题