裁剪图像并转换为base64 上传结果显图裁剪生成

chenyajun  2022-10-16 14:01:58  阅读 1399 次 评论 0 条
<html>    <head>    <script src="https://cdn.jsdelivr.net/gh/jamesssooi/Croppr.js@2.3.0/dist/croppr.min.js"></script>    <link href="https://cdn.jsdelivr.net/gh/jamesssooi/Croppr.js@2.3.0/dist/croppr.min.css" rel="stylesheet"/>    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">    <title>Recorta tu imagen y transforma a base64</title>    <style>    
         body {    
             background-color: #353a47;    
             color: white;    
             font-family: 'Montserrat', sans-serif;    
         }    
         footer {    
             text-align: center;    
             margin: 2rem 0;    
         }    
         footer a {    
             color: white;    
             text-decoration: none;    
         }    
         .container {    
             max-width: 1000px;    
             margin: 0 auto;    
         }    
         .container-demo {    
             display: flex;    
             flex-wrap: wrap;    
         }    
         .container-demo__title {    
             font-family: 'Montserrat', sans-serif;    
             text-align: center;    
             margin: 2rem 0;    
         }    
         .container-demo .col {    
             width: 50%;    
             min-height: 10rem;    
             text-align: center;    
         }    
         .container-demo img {    
             width: 200px;    
         }    
         .container-demo canvas {    
             object-fit: cover;    
             width: 200px;    
             height: 200px;    
         }    
         .container-demo code {    
             display: block;    
             height: 100px;    
             overflow-y: auto;    
             margin-bottom: 1rem;    
         }    
        </style>    <script>    
         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;    
             }    
             /////////////////////// DEMO //////////////////////////////////    
             /**    
              * Método que seleccona todo el texto    
              */    
             function selectText(e) {    
                 let node = e.target;    
                 if (document.selection) { // IE    
                     var range = document.body.createTextRange();    
                     range.moveToElementText(node);    
                     range.select();    
                 } else if (window.getSelection) {    
                     var range = document.createRange();    
                     range.selectNode(node);    
                     window.getSelection().removeAllRanges();    
                     window.getSelection().addRange(range);    
                 }    
             }    
             document.querySelector('#base64').addEventListener('click', selectText, false);    
             document.querySelector('#base64HTML').addEventListener('click', selectText, false);    
         });    
        </script>    </head>    <body>    <div class="container">    <h1 class="container-demo__title">Recorta tu imagen y transforma a base64</h1>    <div class="container-demo">    <div class="col">    <h2>1 Introduce tu imagen</h2>    <!-- Input file donde se adjunta la imagen -->    <input type="file" id="image">    </div>    <div class="col">    <h2>2 Recorta</h2>    <!-- Editor donde se recortará la imagen con la ayuda de croppr.js -->    <div id="editor"></div>    </div>    <div class="col">    <h2>3 Previsualiza el resultado</h2>    <!-- Previa del recorte -->    <canvas id="preview"></canvas>    </div>    <div class="col">    <h2>4 Copia el código Base64</h2>    <!-- Muestra de la imagen recortada en Base64 -->    <code id="base64"></code>    <h3>Ejemplo HTML</h3>    <code id="base64HTML">&lt;img src=""&gt;</code>    </div>    </div>    </div>    <footer>    <a href="https://programadorwebvalencia.com/blog">Programador Web Valencia</a>    </footer>    </body>    </html>


本文地址:https://chenyajun.net/index.php/post/105.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!