web-dev-qa-db-fra.com

Chargement d'une image sur un canevas avec javaScript

Salut à tous, je teste actuellement en utilisant l'élément canvas pour dessiner tous les arrière-plans (j'ajouterai des effets plus tard à ces images et c'est la raison pour laquelle je n'utilise pas CSS pour charger les images), cela dit, j'ai actuellement du mal à charger une image sur la toile. voici le code:

<html>    
<head>    
    <title>Canvas image testing</title>
    <script type="text/javascript">
        function Test1() {
            var ctx = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                //Loading of the home test image - img1
                var img1 = new Image();
                img1.src = 'img/Home.jpg';
                //drawing of the test image - img1
                img1.onload = function () {
                    //draw background image
                    ctx.drawimage(img1, 0, 0);
                    //draw a box over the top
                    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
                    ctx.fillRect(0, 0, 500, 500);
                };
            }                
        }
    </script>
    <style type="text/css">
        canvas { border: 2px solid black; width: 100%; height: 98%; }
    </style>
</head>
<body onload="Test1();">    
    <canvas id="canvas" width="1280" height="720"></canvas>      
</body>
</html>

Je pense que je ne charge pas l'image correctement mais je ne suis pas sûr.

javascripthtmlcanvas
16
dee Five

Il y a plusieurs choses:

  1. drawimage doit être drawImage - notez le capital i.
  2. Votre getElementById recherche un élément dont l'ID est canvas, mais il doit être test1. canvas est la balise, pas l'ID.
  3. Remplacez la variable canvas (par exemple, dans votre canvas.getContext lignes) avec ctx, car c'est la variable que vous avez utilisée pour sélectionner votre élément canvas.
  4. Liez votre gestionnaire onload avant de définir le src de l'image.

Votre fonction devrait donc se terminer comme suit:

function Test1() {
    var ctx = document.getElementById('test1');
    if (ctx.getContext) {

        ctx = ctx.getContext('2d');

        //Loading of the home test image - img1
        var img1 = new Image();

        //drawing of the test image - img1
        img1.onload = function () {
            //draw background image
            ctx.drawImage(img1, 0, 0);
            //draw a box over the top
            ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
            ctx.fillRect(0, 0, 500, 500);

        };

        img1.src = 'img/Home.jpg';
    }
}
22
freejosh

Utilisation de nouvelles fonctionnalités JavaScript:

let img = await loadImage("./my/image/path.jpg");
ctx.drawImage(img, 0, 0);

et la fonction loadImage ressemble à ceci:

function loadImage(url) {
  return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}
13
user993683

déplacez l'écouteur d'événements onload vers avant de définir le src pour l'image.

    var img1 = new Image();

    //drawing of the test image - img1
    img1.onload = function () {
        //draw background image
        ctx.drawImage(img1, 0, 0);
        //draw a box over the top
        ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
        ctx.fillRect(0, 0, 500, 500);

    };

    img1.src = 'img/Home.jpg';
7
Iwan

Attribuez votre ressource de fichier local (URL) à la source d'image et dessinez l'image à l'aide du contexte du canevas que vous souhaitez charger. C'est tout. Voir le code ci-dessous.

var loadImage = function (url, ctx) {
  var img = new Image();
  img.src = url
  img.onload = function () { 
    ctx.drawImage(img, 0, 0);
  }
}
6
Yohanes AI