Home / Questions / 318155
Accepted
Noob Dev
Asked: 2020-12-25 06:11:26 +0800 CST 2020-12-25 06:11:26 +0800 CST

How to crop or resize an image with HTML and CSS?

  • 772

The functionality I am looking for is that when uploading an image, the user can resize, zoom and save it with that scale, but I have not found a way to do that.

The way I have it implemented is that the image is displayed once it is loaded, as shown below:

enter image description here

And that when clicking to zoom, the image can be made larger, ending something like this:

enter image description here

This is my code for that part of the page, with its JavaScript part to display the loaded image:

$(document).on('click','.viewDesign',function(){
		if($(this).parent().find('input')[0].files[0]){
	    	$('#designPreview').attr('src', window.URL.createObjectURL($(this).parent().find('input')[0].files[0]));
		}
		else if($(this).data('file')){
	    	$('#designPreview').attr('src', $(this).data('file'));
		}
	});
.container
  img.design#designPreview(src="img/diseno/diseno.png")
  .escala
    p Escala
    .buttons
      i(type='button') -
      i(type='button') +

javascript

1 Answers

  1. Best Answer

    I think you can do it with this code, the comments are explanatory:

    // Esperamos a que todo el HTML esté cargado antes de ejecutar Javascrip
document.addEventListener('DOMContentLoaded', () => {

    // Input File
    const inputImage = document.querySelector('#image');
    // Nodo donde estará el editor
    const editor = document.querySelector('#editor');
    // El canvas donde se mostrará la previa
    const miCanvas = document.querySelector('#preview');
    // Contexto del canvas
    const contexto = miCanvas.getContext('2d');
    // Ruta de la imagen seleccionada
    let urlImage = undefined;
    // Evento disparado cuando se adjunte una imagen
    inputImage.addEventListener('change', abrirEditor, false);

    /**
    * Método que abre el editor con la imagen seleccionada
    */
    function abrirEditor(e) {
        // Obtiene la imagen
        urlImage = URL.createObjectURL(e.target.files[0]);

        // Borra editor en caso que existiera una imagen previa
        editor.innerHTML = '';
        let cropprImg = document.createElement('img');
        cropprImg.setAttribute('id', 'croppr');
        editor.appendChild(cropprImg);

        // Limpia la previa en caso que existiera algún elemento previo
        contexto.clearRect(0, 0, miCanvas.width, miCanvas.height);

        // Envia la imagen al editor para su recorte
        document.querySelector('#croppr').setAttribute('src', urlImage);

        // Crea el editor
        new Croppr('#croppr', {
            aspectRatio: 1,
            startSize: [70, 70],
            onCropEnd: recortarImagen
        })
    }

    /**
    * Método que recorta la imagen con las coordenadas proporcionadas con croppr.js
    */
    function recortarImagen(data) {
        // Variables
        const inicioX = data.x;
        const inicioY = data.y;
        const nuevoAncho = data.width;
        const nuevaAltura = data.height;
        const zoom = 1;
        let imagenEn64 = '';
        // La imprimo
        miCanvas.width = nuevoAncho;
        miCanvas.height = nuevaAltura;
        // La declaro
        let miNuevaImagenTemp = new Image();
        // Cuando la imagen se carge se procederá al recorte
        miNuevaImagenTemp.onload = function() {
            // Se recorta
            contexto.drawImage(miNuevaImagenTemp, inicioX, inicioY, nuevoAncho * zoom, nuevaAltura * zoom, 0, 0, nuevoAncho, nuevaAltura);
            // Se transforma a base64
            imagenEn64 = miCanvas.toDataURL("image/jpeg");
            // Mostramos el código generado
            document.querySelector('#base64').textContent = imagenEn64;
            document.querySelector('#base64HTML').textContent = '<img src="' + imagenEn64.slice(0, 40) + '...">';

        }
        // Proporciona la imagen cruda, sin editarla por ahora
        miNuevaImagenTemp.src = urlImage;
    }
});

    Any additional information, here is the source .

    successes!

    • 4