Html5 image cropping

Question

I use context-blender to apply the effect of multiplying by the first 192 pixels of a fixed color html background image to achieve a transparency effect in the page title.

In html, I have 2 canvases. One for part of the image to apply the multiplication effect and one for color.

In javascript, after setting the color of the color canvas and the width of both canvases in window.innerWidth I get a background image using

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

Now a problem arises. I want to draw a cropped image onto an image on the image canvas in order to apply the multiplication effect. I am trying to do the following:

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

But I'm doing something wrong, getting the cropped height.

Example: for a 1536x1152 image and a browser container 1293x679, the value I get for the height of the cropped source is 230, but to get the crop I need to use something around 296.

Edit:

I use background-size: css cover art to create a background image

Edit2:

I created a fiddle to illustrate the problem. If you uncomment the line //cHeight *= magicConstant; , the cropped image looks much better, but everything ceases to make sense. I removed the multiplication effect of the violinist, but should not have reproduced the problem. I also noticed that the behavior changed if I remove the second canvas from the URL.

Btw, this behavior happened with google chrome, but I think the same thing happens with safari and firefox.

Answer 1

Ok, I fixed it. The man was so heavy! Mostly because you forgot to set the height of the imageCanvas canvas. It also did not help that the image has a white border. I spent a lot of time trying to figure out where the gasket is coming from.

So, to start fiddle in the doBlending() function set imageCanvas.canvas.height = height;

Then the calculations in crop() should cover 2 possibilities. Is the image scaled for height and truncated on the left, or scaled for width and truncated at the bottom? I will not write for you, but here for the case when it scales for height:

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

I really don't know where you came up with the scaling factors in your example. The image will be scaled by multiplying the x and y sizes by some scale factor. This is how you maintain aspect ratio. The scale factor will be larger than the size so that the image height matches the window height, and the scale so that the image width matches the window width.

Answer 2

I think it may not be practical for you to use the internal dimensions of the window. Since the cover will preserve the proportions of the background image, this means that both of its sizes may not be fully displayed. Therefore, if you are trying to convert the aspect ratio to determine where the clip is, you will have to consider the fact that the image may leak from the borders of the window.