Canvas HTML - How to load an image to a Canvas correctly?

Question

Canvas HTML - How to load an image to a Canvas correctly?

Navigation

#1 by (0 votes)

1

Good, I have that problem in my code. I have managed to load an image on a canvas, but the problem comes when the images are very large . What's going on? The image appears on the canvas but cut (usually appears half up or something like that). I think that is why, when I want to show the information of the pixels (the RGBA) it shows wrong information (a color where there is none).

I would also like to find a way to load only an image on the canvas, so that when you want to load a different image, the previous one will be deleted

<!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>

Here is the code I have so far, thank you very much.

javascript html canvas

asked by Daniel Alejandro 24.11.2017 в 21:55

source

1 answer

Delete line null file created CMD DBeaver - Unexpected behavior of the commit when editing components

score 0 · Answer 1

To avoid this type of problem you can resize the canvas depending on the size of the loaded image: after image.onload I have added these two lines of code:

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>

This is an example in codepen where you can do the same and where you can upload a new image by dragging it from your computer: Image color picker