0

estoy aprendiendo un poco de jquery y lo que quiero hacer es obtener una imagen para hacerle un crop a la imagen pero sin usar el input file.

              <div class="image-editor">
                                    <div id="estado"></div>
                                    <input type='file' id='image' class='cropit-image-input'/> 
                                    <div  class="cropit-preview"></div>
                                    <div class="image-size-label">
                                      Resize image
                                    </div>
                                    <input type="range" class="cropit-image-zoom-input">
                                    <button class="rotate-ccw">Rotate counterclockwise</button>
                                    <button class="rotate-cw">Rotate clockwise</button>

                                    <button class="export">Export</button>

                                    <script type="text/javascript">
                                         $(function() {

                                            $('.image-editor').cropit({

                                              exportZoom: 1.25,
                                              imageBackground: true,
                                              imageBackgroundBorderWidth: 20

                                            });

                                        $('.rotate-cw').click(function() {
                                          $('.image-editor').cropit('rotateCW');
                                        });
                                        $('.rotate-ccw').click(function() {
                                          $('.image-editor').cropit('rotateCCW');
                                        });

                                        $('.export').click(function() {
                                          var imageData = $('.image-editor').cropit('export');
                                          alert(imageData);
                                        });
                                      });
                                    </script>

como ven el codigo de jquery obtiene la imagen desde el input file<input type='file' id='image' class='cropit-image-input' />

$('.image-editor').cropit({

                                          exportZoom: 1.25,
                                          imageBackground: true,
                                          imageBackgroundBorderWidth: 20

                                        });

acá la captura a través de su clase, pero lo que quiero es otra forma de capturar esa imagen sin usar el input file, ya que e intentado poner la direccion de la imagen en un input text o capturar directamente con la id desde un <img> pero no me resulta.

ojala me me puedan ayudar.

5
  • 2
    No existe otro modo de hacerlo: la única manera de que el navegador tenga acceso a un fichero local es mediante la participación del usuario, que ponga el path en un input de tipo file. Podrías adornar este input file (creando una funcionalidad drag&drop), pero no te podrás librar de él el 17 oct. 2018 a las 7:22
  • Puedes utilizar el evento drag. En este caso en lugar de utilizar el input file coges la imagen de tu ordenador y la arrastras en un elemento canvas. Puedes leer cómo hacerlo en JavaScriprt aquí: El evento drag
    – enxaneta
    el 17 oct. 2018 a las 7:48
  • 1
    probaste con $('#image-cropper').cropit({ imageState: { src: { imageSrc } } }); ? es como arma los demos en scottcheng.github.io/cropit el 17 oct. 2018 a las 8:08
  • si lo intente y funciona, pero a media, ya que al cargar la imagen solo lo hace 1 vez. si quiero tomar otra imagen debo refrescar la pagina.
    – Mtac
    el 17 oct. 2018 a las 15:39
  • Gracias por sus respuestas.
    – Mtac
    el 17 oct. 2018 a las 15:49

1 respuesta 1

0

una forma sencilla en la cual le di solucion fue agregar un DIV con un ID (Como quieras llamarlo). dentro de ese id en jquery cree el input file con un id tambien. y simule un click para ejecutar esta accion

introducir la descripción de la imagen aquí

1
  • El código siempre debe ir como texto por favor. ;)
    – Israel-ICM
    el 6 jun. 2022 a las 18:50

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.