imagen html5 cultivo

Question

estoy usando context-blender para aplicar un efecto multiplican en los primeros 192 píxeles de la imagen de fondo html con un color fijo para lograr un efecto de transparencia en la cabecera de la página.

En el html tengo 2 lienzo. Uno para la parte de la imagen para aplicar el efecto multiplicar y otro para el color.

En el javascript, después de ajustar el color de la tela de color y el ancho de la tela, tanto a la window.innerWidth Me estoy poniendo la imagen de fondo:

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

Ahora viene el problema. Quiero dibujar una imagen recortada en la imagen en el lienzo de la imagen para poder aplicar el efecto de multiplicar. Estoy tratando de hacer lo siguiente:

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

Pero yo estoy haciendo algo mal conseguir la altura recortada.

Ej: Para una imagen 1536x1152 y un contenedor de navegador 1293x679, el valor que estoy recibiendo de la fuente cosechado altura es de 230, pero al llegar la cosecha correcta necesito usar algo alrededor de 296.

Edición:

estoy usando fondo de tamaño: cubierta en el css para crear la imagen de fondo

Edit2:

Creé un fiddle para ilustrar el problema. Si se quite la línea //cHeight *= magicConstant; la imagen recortada se ve mucho mejor, pero las cosas dejan de tener sentido. Eliminé el efecto de multiplicación en el violín, pero eso no es necesario para reproducir el problema. También noté que el comportamiento cambió si eliminé el segundo lienzo de la URL.

Por cierto, este comportamiento ocurrió con Google Chrome, pero creo que lo mismo sucede en Safari y Firefox.

Answer 1

bien, lo he arreglado. ¡El hombre fue tan duro! Principalmente porque olvidaste configurar la altura del lienzo de imageCanvas. Tampoco ayudó que la imagen tenga un borde blanco. Pasé muchísimo tiempo intentando descubrir de dónde venía el relleno.

Así que para empezar, para el caso de la fiddle, en función de doBlending(), establezca imageCanvas.canvas.height = height;

A continuación, los cálculos en crop() necesidad de cubrir 2 posibilidades. ¿La imagen se escala para la altura y se trunca a la izquierda o se escala para el ancho y se trunca en la parte inferior? No voy a escribir tanto para usted, pero aquí está el uno para el caso en que se escala para la altura:

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

realmente no tengo ni idea de dónde viene arriba con los factores de escala en su ejemplo.La imagen se escalará multiplicando las dimensiones x e y por algún factor de escala. Así es como conservas la relación de aspecto. El factor de escala será el más grande para que la altura de la imagen coincida con la altura de la ventana y la que haga que el ancho de la imagen coincida con el ancho de la ventana.

Answer 2

creo que puede no ser válida para que usted sea mediante la ventana dimensiones internas aquí. Como la cubierta mantendrá la relación de aspecto de la imagen de fondo, significa que es posible que ambas dimensiones no se muestren completamente. Entonces, si está tratando de transformar las relaciones de aspecto para determinar dónde cortar, debería tener en cuenta el hecho de que la imagen puede fluir fuera de los bordes de la ventana.