usar jQuery para obtener 'verdadero tamaño' de la imagen sin la eliminación de la clase
-
08-10-2019 - |
Pregunta
Estoy utilizando Jcrop en una imagen cuyo tamaño puede cambiarse con CSS para la uniformidad.
JS
<script type="text/javascript">
$(window).load(function() {
//invoke Jcrop API and set options
var api = $.Jcrop('#image', { onSelect: storeCoords, trueSize: [w, h] });
api.disable(); //disable until ready to use
//enable the Jcrop on crop button click
$('#crop').click(function() {
api.enable();
});
});
function storeCoords(c) {
$('#X').val(c.x);
$('#Y').val(c.y);
$('#W').val(c.w);
$('#H').val(c.h);
};
</script>
HTML
<body>
<img src="/path/to/image.jpg" id="image" class="img_class" alt="" />
<br />
<span id="crop" class="button">Crop Photo</span>
<span id="#X" class="hidden"></span>
<span id="#Y" class="hidden"></span>
<span id="#W" class="hidden"></span>
<span id="#H" class="hidden"></span>
</body>
CSS
body { font-size: 13px; width: 500px; height: 500px; }
.image { width: 200px; height: 300px; }
.hidden { display: none; }
necesito para establecer las variables h
y w
con el tamaño de la imagen real. He intentado utilizar el manipulador .clone()
para hacer una copia de la imagen y luego retire la clase a partir del clon para obtener el dimensionamiento pero establece las variables a ceros.
var pic = $('#image').clone();
pic.removeClass('image');
var h = pic.height();
var w = pic.width();
Funciona si añado la imagen a un elemento en la página, pero éstas son las imágenes más grandes y yo preferiría no estar cargándolos como imágenes ocultas si hay una mejor manera de hacer esto. También la eliminación de la clase, el establecimiento de las variables, y luego volver a agregar la clase estaba produciendo resultados esporádicos.
Me esperaba algo a lo largo de las líneas de:
$('#image').removeClass('image', function() {
h = $(this).height();
w = $(this).width();
}).addClass('image');
Pero la función removeClass
no funciona así que: P
Solución
Trate de ocultar la imagen, y luego tomar las dimensiones, a continuación, mostrar que:
var $img = $("#image");
$img.hide().removeClass("image");
var width = $img.width();
var height = $img.height();
$img.addClass("image").show();
Esto debería eliminar cualquier comportamiento extraño es posible que vea mientras que la adición y la eliminación de la clase.
Otros consejos
Tal vez se puede clonar la imagen (no debe ser extremadamente dolorosa a la red, ya que debe almacenar en caché), y obtener el tamaño de la clonado uno:
$newImg = $("#image").clone();
$newImg.css("display", "none").removeClass("image").appendTo("body");
var width = $newImg.width(), height = $newImg.height();
$newImg.remove();
Buena suerte!