Recortar/cortar mediante programación la imagen usando Javascript

Question

¿Hay algún documento/tutorial sobre cómo recortar o cortar una imagen grande para que el usuario solo vea una pequeña porción de esta imagen? Digamos que la imagen de origen es 10 fotogramas de animación, apilados de extremo a extremo para que sea realmente amplia. ¿Qué podría hacer con Javascript para mostrar solo 1 marco arbitrario de animación a la vez?

He analizado esta técnica de "CSS Spriting", pero no creo que pueda usarla aquí. La imagen de origen se produce dinámicamente desde el servidor; No sabré la longitud total, o el tamaño de cada cuadro, hasta que vuelva del servidor. Espero que pueda hacer algo como:

var image = getElementByID('some-id'); 

image.src = pathToReallyLongImage; 

// Any way to do this?! 
image.width = cellWidth; 
image.offset = cellWidth * imageNumber; 

Answer 1

Esto se puede hacer encerrando su imagen en un div "viewport". Establezca un ancho y alto en el div (según sus necesidades), luego configure position: relative y overflow: hidden en él. Coloque su imagen de manera absoluta dentro de ella y cambie la posición para cambiar las partes que se muestran.

Para mostrar una sección de 30x40 de una imagen a partir de (10,20):

<style type="text/css"> 
    div.viewport { 
     overflow: hidden; 
     position: relative; 
    } 

    img.clipped { 
     display: block; 
     position: absolute; 
    } 
</style> 

<script type="text/javascript"> 
    function setViewport(img, x, y, width, height) { 
     img.style.left = "-" + x + "px"; 
     img.style.top = "-" + y + "px"; 

     if (width !== undefined) { 
      img.parentNode.style.width = width + "px"; 
      img.parentNode.style.height = height + "px"; 
     } 
    } 

    setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40); 
</script> 

<div class="viewport"> 
    <img class="clipped" src="/images/clipped.png" alt="Clipped image"/> 
</div> 

Las propiedades CSS comunes están asociados con las clases de modo que usted puede tener varias ventanas/recortado de las imágenes en su página. Se puede llamar a la función setViewport(…) en cualquier momento para cambiar qué parte de la imagen se muestra.

Answer 2

Las propiedades de ancho/alto del objeto de imagen del documento son de solo lectura. Sin embargo, si pudiera cambiarlos, solo aplastaría los marcos, no cortaría los marcos como lo desea. El tipo de manipulación de imagen que desea no se puede hacer con javascript en el lado del cliente. Sugiero cortar las imágenes en el servidor, o superponer un div en la imagen para ocultar las partes que no desea visualizar.

Answer 3

Lo que hace el spritness es esencialmente posicionar una DIV completamente posicionada dentro de otra DIV que tiene desbordamiento: oculta. Usted puede hacer lo mismo, todo lo que necesita hacer es redimensionar el DIV externo dependiendo del tamaño de cada fotograma de la imagen más grande. Puedes hacer eso en código fácilmente.

simplemente Puede configurar el estilo del DIV interior:

left: (your x-position = 0 or a negative integer * frame width)px 

La mayoría de los marcos de JavaScript hacer esto muy fácil.

Answer 4

CSS también define un estilo para el recorte. Vea la propiedad del clip en las especificaciones de CSS.

Answer 5

Por desgracia, JavaScript simplemente no es capaz de extraer las propiedades de la imagen que necesita para hacer algo como esto. Sin embargo, puede haber salvación en la forma del elemento canvas> HTML < combinado con un poco de scripting del lado del servidor.

código PHP para ir sobre la extracción de la anchura y altura de la imagen muy grande:

<?php 
$large_image = 'path/to/large_image'; 
$full_w = imagesx($large_image); 
$full_h = imagesy($large_image); 
?> 

A partir de aquí, que había entonces cargar la imagen en un> elemento < lienzo, un ejemplo de lo que se documenta here. Ahora, mi teoría era que puedes extraer datos de píxeles de un elemento canvas> <; suponiendo que pueda, simplemente asegúrese de tener algún tipo de divisor definido entre los marcos de la imagen grande y luego búsquelo dentro del lienzo.Digamos que encontró el divisor a 110 píxeles de la izquierda de la imagen; Entonces sabría que cada "fotograma" tiene 110 píxeles de ancho, y ya tiene todo el ancho almacenado en una variable PHP, por lo que descifrar la cantidad de imagen con la que está trabajando sería muy fácil.

El único aspecto especulativo de este método es si JavaScript es capaz o no de extraer datos de color de una ubicación específica dentro de una imagen cargada en un elemento canvas> <; si esto es posible, entonces lo que estás tratando de lograr es completamente factible.

Answer 6

Supongo que quiere tomar una miniatura para su imagen. Puede utilizar ImageThumbnail.js que crearon a partir de la biblioteca prototipo de esta manera:

<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript" src="ImageThumbnail.js"></script> 
<input type="file" id="photo"> 
<img src="empty.gif" id="thumbnail" width="80" height="0"> 
<script type="text/javascript"> 
<!-- 
    new Image.Thumbnail('thumbnail', 'photo'); 
//--> 
</script> 

para más information

Answer 7

En respuesta a:

Ay, JavaScript simplemente no es capaz de extraer las propiedades de la imagen que necesitarías para hacer algo como esto. Sin embargo, puede haber salvación en la forma del elemento HTML combinado con un poco de scripting del lado del servidor. ...

< ? (open php) 
$large_image = 'path/to/large_image'; 
$full_w = imagesx($large_image); 
$full_h = imagesy($large_image); 
(close php) ? > 

Esto se puede hacer en Javascript, Google sólo un poco:

var newimage = new Image(); 
newimage.src = document.getElementById('background').src; 
var height = newimage.height; 
var width = newimage.width; 

Esto genera una nueva imagen a partir de una existente y la captura de esta manera en java script original altura y anchura propiedades de la imagen original (no el id'ed como fondo

En respuesta a:.

Las propiedades de ancho/alto del objeto de imagen del documento son de solo lectura. Sin embargo, si pudiera cambiarlos, solo aplastaría los marcos, no cortaría los marcos como lo desea. El tipo de manipulación de imagen que desea no se puede hacer con javascript en el lado del cliente. Sugiero cortar las imágenes en el servidor, o superponer un div en la imagen para ocultar las partes que no desea visualizar.

...

var newimage = new Image(); 
newimage.src = document.getElementById('background').src; 
var height = newimage.height; 
var width = newimage.width; 
newimage.style.height = '200px'; 
newimage.style.width = '200px'; 
newimage.height = '200px'; 
newimage.width = '200px'; 

y si quería:

newimage.setAttribute('height','200px'); 

El duplicó newimage.style.height y se necesita newimage.height en determinadas circunstancias con el fin de asegurarse de que un IE se Comprenda a tiempo que la imagen cambiará de tamaño (lo renderizará inmediatamente después, y el procesamiento interno de IE es demasiado lento para eso).

Gracias por la secuencia de comandos anterior Modifiqué e implementé en http://morethanvoice.net/m1/reader13.php (haga clic con el botón secundario en el menú ... mouseover zoom prestado) corregido incluso en IE, pero como notará el procesamiento de imagen de mousemove demasiado rápido para el IE antiguo, representa la posición pero solo una vez la imagen. En cualquier caso, cualquier buena idea es bienvenida.

Gracias a todos por su atención, esperamos que los códigos anteriores puedan ayudar a alguien ...

Claudio Klemp http://morethanvoice.net/m1/reader13.php

Answer 8

uso de la biblioteca haxcv intento haxcv js por funciones simples

van a https://docs.haxcv.org/Methods/cutImage para leer más acerca de su biblioteca

var Pixels = _("img").cutImage (x , y , width , height ); 

_ ("img"). Src (Pixels.src);

// Corte la imagen de retorno pero trate de incluir la biblioteca primera