¿Es posible mostrar cualquier parte de la imagen en la etiqueta img (con píxeles) a través de JavaScript?obteniendo parte de una imagen con JavaScript
Tendría una imagen grande preparada (por ejemplo, 32x320 píxeles) y una posición de inicio definida (X, Y, por ej. 0,32) y ancho/alto (por ej. 32,32) y me gustaría que la secuencia de comandos muestre la segunda (32x32 píxeles) parte de la imagen principal.
Puede usar las propiedades CSS para esto y cambiarlas a través de JS. Establezca la imagen como fondo de un elemento con el tamaño deseado y ajuste su posición con la posición de fondo para que la parte correcta esté visible. Algunas personas lo llaman CSS sprites.
+1 Ni siquiera tiene que usar un DIV. Utilizo un PNG transparente y establezco su imagen de fondo, que funciona igual de bien para este propósito, pero me da la opción de usar el artefacto en línea si quiero sin tener que lidiar con flotadores, etc. – Robusto
Sí, naturalmente esto funciona con cualquier elemento Sin embargo, usar un elemento img me suena algo sucio, probablemente usaría display: inline-block; si quisiera que el elemento fluya con el texto. –
Para darle múltiples opciones, siempre puede usar un lienzo HTML5 y volver a dibujar la imagen según sea necesario. Puede encontrar un buen tutorial sobre cómo hacer esto aquí: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images Sin embargo, el método de sprite de CSS sería preferible ya que IE aún no es compatible con el lienzo.
incluso puede guardar la imagen que dibujó como una URL de datos http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/ –
Posible duplicado de [¿Cómo puedo visualizar solo una parte de una imagen en HTML/CSS?] (Https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion- of-an-image-in-html-css) – vaxquis
Mientras que la pregunta referenciada es sobre html/css, esto fue para JavaScript. – Alper
¿Sabía que, dado que su pregunta era implícitamente sobre JavaScript DOM, y el DOM en sí mismo es solo un backend de programación para HTML/CSS, su pregunta * era * sobre HTML/CSS en sí? La respuesta aceptada aquí lo señala a CSS por esa misma razón. Usted * no puede * hacer JS DOM * sin * tener en cuenta HTML/CSS - incluso el elemento canvas de HTML5 mencionado en la otra respuesta es solo eso - un elemento de documento HTML5. – vaxquis