2

Buenas, tengo ese problema en mi código. He logrado cargar una imagen en un canvas, pero el problema viene cuando las imágenes son muy grandes. ¿Qué sucede? La imagen aparece en el canvas pero cortada (generalmente aparece de la mitad para arriba o algo por el estilo). Creo que es por esto que, cuando deseo mostrar la información de los pixeles (el RGBA) muestra información errónea (un color donde no hay).

También quisiera hallar la manera de cargar solo una imagen en el canvas, de tal manera que cuando se quiera cargar otra imagen distinta, la anterior se borre

<!DOCTYPE html>
<html>
  <head>
  <style>
   body {margin: 0px;}
   canvas {width: 100%; height: 100%;}
  </style>
  <title>Proyecto</title>
  </head>

  <div>
    <label for="image_uploads">Cargar imagen</label>
    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg,.jpeg,.png" multiple>
  </div>
  <div id="color" style="width:200px;height:50px;float:left"></div>
  <div>
   <label for="smoothbtn">
   <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">
   Activar suavizado de imagen
   </label>
  </div>

  <canvas id = "can" width="1200" height="600" style="position:absolute;border:0px solid;"></canvas>

  <script src="js/dat.gui.min.js"></script>
  <script src="js/three2.js"></script>

  <script>

    var image = new Image();
    var canvas = document.getElementById('can');
    var ctx= canvas.getContext('2d');;
    var input = document.querySelector('input');    
    var curFile = input.files;
    var source = "";

    input.style.opacity = 0; 
    input.addEventListener('change', updateImageDisplay); 

    function updateImageDisplay(){

        var curFile = input.files;

        var list = document.createElement('ol');

        for(var i = 0; i < curFile.length; i++){

            if(validFileType(curFile[i])){
                source = curFile[i].name;
                image.src = window.URL.createObjectURL(curFile[i]);

                    image.onload = function(){
                        ctx.drawImage(image, 0, 0);
                        image.style.display = 'none';
                    }

                listItem.appendChild(image);
            } 

            list.appendChild(listItem);
        }
    }

    var fileTypes = [
     'image/jpeg',
     'image/pjpeg',
     'image/png'
    ]

    function validFileType(file){
     for(var i = 0; i < fileTypes.length; i++){
        if(file.type === fileTypes[i]) 
            return true;
    }

    return false;
    }

    gui = new dat.GUI();
    //MOSTRAR RGBA
    var color = document.getElementById('color');

    function pick(event){
            var x = event.layerX;
            var y = event.layerY;
            var pixel = ctx.getImageData(x, y, 1, 1);
            var data = pixel.data;
            var rgba = 'RGBA(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')';
            color.style.background =  rgba;
            color.textContent = rgba;
    }

    canvas.addEventListener('mousemove', pick);

  </script>
</html>

Aqui está el código que tengo hasta ahora, muchas gracias.

1 respuesta 1

1

Para evitar este tipo de problemas puedes redimensionar el canvas en función del tamaño de la imagen cargada: después de image.onload he añadido estas dos líneas de código:

canvas.width = image.width;
canvas.height = image.height;

var image = new Image();
    var canvas = document.getElementById('can');
    var ctx= canvas.getContext('2d');;
    var input = document.querySelector('input');    
    var curFile = input.files;
    var source = "";

    input.style.opacity = 0; 
    input.addEventListener('change', updateImageDisplay); 

    function updateImageDisplay(){

        var curFile = input.files;

        var list = document.createElement('ol');
        var listItem = document.createElement('li');

        for(var i = 0; i < curFile.length; i++){

            if(validFileType(curFile[i])){
                source = curFile[i].name;
                image.src = window.URL.createObjectURL(curFile[i]);

                    image.onload = function(){
                        /////////////////////////////
                        canvas.width = image.width;
                        canvas.height = image.height;
                        //////////////////////////////
                        ctx.drawImage(image, 0, 0);
                        image.style.display = 'none';
                    }

                listItem.appendChild(image);
            } 

            list.appendChild(listItem);
        }
    }

    var fileTypes = [
     'image/jpeg',
     'image/pjpeg',
     'image/png'
    ]

    function validFileType(file){
     for(var i = 0; i < fileTypes.length; i++){
        if(file.type === fileTypes[i]) 
            return true;
    }

    return false;
    }

    //gui = new dat.GUI();
    //MOSTRAR RGBA
    var color = document.getElementById('color');

    function pick(event){
            var x = event.layerX;
            var y = event.layerY;
            var pixel = ctx.getImageData(x, y, 1, 1);
            var data = pixel.data;
            var rgba = 'RGBA(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')';
            color.style.background =  rgba;
            color.textContent = rgba;
    }

    canvas.addEventListener('mousemove', pick);
body {margin: 0px;}
label{cursor:pointer;}
label:hover{text-decoration:underline;}
canvas {background:#d9d9d9; display:block;}
<div>
    <label for="image_uploads">Cargar imagen</label>
    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg,.jpeg,.png" multiple>
  </div>
  <div id="color" style="width:200px;height:50px;float:left"></div>
  <div>
   <label for="smoothbtn">
   <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">
   Activar suavizado de imagen
   </label>
  </div>

  <canvas id = "can" width="1200" height="600" style="position:absolute;border:0px solid;"></canvas>

Este es un ejemplo en codepen donde puedes hacer lo mismo y donde puedes cargar una nueva imagen arrastrándola desde tu ordenador: Image color picker

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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