Foros del Web » Programando para Internet » Javascript »

sin utilizar jQuery/librerias puedo modificar el SIZE de una imágen?

Estas en el tema de sin utilizar jQuery/librerias puedo modificar el SIZE de una imágen? en el foro de Javascript en Foros del Web. Hola. Quiero redimensionar imágenes con JS, y no logro encntrar el código que me lo permita. Realmente es "TAN COMPLEJO" que requiere miles de lineas? ...
  #1 (permalink)  
Antiguo 12/08/2019, 20:23
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.975
Antigüedad: 15 años, 9 meses
Puntos: 20
sin utilizar jQuery/librerias puedo modificar el SIZE de una imágen?

Hola.

Quiero redimensionar imágenes con JS,
y no logro encntrar el código que me lo permita.

Realmente es "TAN COMPLEJO" que requiere miles de lineas?

Solo requiero la parte que permite "estirar/encoger" un gráfico,
por ejemplo:

https://xdsoft.net/jodit/

conserva el RATIO y lo hace impecablemente, pero pése a que es LIBRE, es un código larguísimo debido a que tiene mil funciones más...

Para los mortales "comunes" como yo, ése código está más hallá de nuestro alcance?

Solo jQuery u otras librerias producto del esfuerzo de miles de horas de trabajo y cientos de programadores pueden lograr ése efecto??

... si alguien dispone de un código y puede brindarlo lo agradeceré mucho,
solo búsco que séa JavaScript sin recursos externos.

Uno de los "trucos" es colocar el gráfico dentro de un DIV con contenteditable="true" y el gráfico al 100%, pero se pierde el RATIO, por ejemplo:
Código:
<style type="text/css">.divimg{
resize:both;
object-fit:cover;
overflow:hidden;
border:1px solid #000;
width:88px;
height:31px;
}
.divimg img{
width:100%;
height:100%;
</style><div id="wysiwyg">
<div contenteditable="true" class="divimg"><img src="https://www.w3.org/Icons/valid-xhtml20.png" /></div>
<div contenteditable="true" class="divimg"><img src="https://www.w3.org/Icons/valid-xhtml20.png" /></div>
<div contenteditable="true" class="divimg"><img src="https://www.w3.org/Icons/valid-xhtml20.png" /></div>
<div contenteditable="true" class="divimg"><img src="https://www.w3.org/Icons/valid-xhtml20.png" /></div>
<div contenteditable="true" class="divimg"><img src="https://www.w3.org/Icons/valid-xhtml20.png" /></div>
</div>
además, el div que contiene el gráfico impide una buena manipulación del mísmo.

Allí hay varias veces EL MÍSMO gráfico y claro!,
así es como se requiere, luego cada uno de ellos se accede con su "index[ID]",
sin embargo el DIV solo me dá problemas...

sería genial poder hacerlo directamente sobre LOS elementos <img del contenedor divimg.

Gracias por la colaboación!
  #2 (permalink)  
Antiguo 13/08/2019, 16:46
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.965
Antigüedad: 11 años, 3 meses
Puntos: 2185
Respuesta: sin utilizar jQuery/librerias puedo modificar el SIZE de una imágen?

Yo uso la librería load-image, no es tan complicada y puedes hacer lo que quieras con las imágenes y, por cierto, es mejor trabajar con canvas en lugar de divs.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 13/08/2019, 17:27
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.975
Antigüedad: 15 años, 9 meses
Puntos: 20
Respuesta: sin utilizar jQuery/librerias puedo modificar el SIZE de una imágen?

Cita:
Iniciado por Triby Ver Mensaje
Yo uso la librería load-image, no es tan complicada y puedes hacer lo que quieras con las imágenes y, por cierto, es mejor trabajar con canvas en lugar de divs.
Gracias Triby.

Utilizo el DIV por que pretendo hacer uso de las instrucciones document.execCommand
  #4 (permalink)  
Antiguo 13/08/2019, 18:53
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.975
Antigüedad: 15 años, 9 meses
Puntos: 20
Respuesta: sin utilizar jQuery/librerias puedo modificar el SIZE de una imágen?

Cita:
Iniciado por Triby Ver Mensaje
Yo uso la librería load-image, ... puedes hacer lo que quieras con las imágenes ...
Hola Triby,
prueba con un ICONO / imagen pequeña: no permite "achicarla"

Alguien puede compartir un código para REDIMENSIONAR por favor?

gracias
  #5 (permalink)  
Antiguo 13/08/2019, 22:36
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.965
Antigüedad: 11 años, 3 meses
Puntos: 2185
Respuesta: sin utilizar jQuery/librerias puedo modificar el SIZE de una imágen?

Ahhh... tú quieres esto: https://konvajs.org/docs/select_and_...eep_Ratio.html
__________________
- León, Guanajuato
- GV-Foto
  #6 (permalink)  
Antiguo 14/08/2019, 04:26
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.975
Antigüedad: 15 años, 9 meses
Puntos: 20
Respuesta: sin utilizar jQuery/librerias puedo modificar el SIZE de una imágen?

Cita:
Iniciado por Triby Ver Mensaje
es correcto maestro!

Más que "querer", necesito hacerlo, con la opción que mencioné al abrir el post: mantener el RATIO.

Crees que su complejidad es "altísima"??

ya que como puedes ver, que en ése "DEMO" utilizan:

"https://unpkg.com/[email protected]/konva.min.js"

Gracia spor tu tiempo.



La zona horaria es GMT -6. Ahora son las 23:13.