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:
además, el div que contiene el gráfico impide una buena manipulación del mísmo.<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>
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!
