Comment ajouter une image au canevas

Question

J'expérimente un peu avec le nouvel élément canvas en HTML.

Je veux simplement ajouter une image au canevas, mais cela ne fonctionne pas pour une raison quelconque.

J'ai le code suivant :

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

L'image existe et je n'obtiens aucune erreur JavaScript. L'image ne s'affiche tout simplement pas.

Il doit y avoir quelque chose de très simple que j'ai manqué...

Answer 1

Vous devez attendre que l'image soit chargée avant de la dessiner. Essayez plutôt ceci :

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

c'est-à-dire dessiner l'image dans le callback onload de l'image.

Answer 2

Voici un exemple de code pour dessiner une image sur le canevas.

$("#selectedImage").change(function(e) {

var URL = window.URL;
var url = URL.createObjectURL(e.target.files[0]);
img.src = url;

img.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");        

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, 500, 500);
}});

Dans le code ci-dessus, selectedImage est un contrôle d'entrée qui peut être utilisé pour parcourir les images sur le système. Pour plus de détails sur l'exemple de code permettant de dessiner une image sur le canevas tout en conservant le rapport hauteur/largeur :

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html

Answer 3

Vous devez utiliser .onload

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d"); 

const drawImage = (url) => {
    const image = new Image();
    image.src = url;
    image.onload = () => {
       ctx.drawImage(image, 0, 0)
    }
}

Voici pourquoi

Si vous chargez d'abord l'image après la création du canevas, ce dernier ne pourra pas transmettre toutes les données de l'image pour la dessiner. Vous devez donc d'abord charger toutes les données qui accompagnent l'image, puis vous pouvez utiliser la fonction drawImage().

Answer 4

Dans mon cas, je me suis trompé dans les paramètres de la fonction, qui sont :

context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);

Si vous attendez d'eux qu'ils soient

context.drawImage(image, width, height);

vous placerez l'image juste à l'extérieur de la toile avec les mêmes effets que ceux décrits dans la question.

Answer 5

context.drawImage propose trois possibilités de choix.

drawImage(image: CanvasImageSource, dx: number, dy: number): void;
drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void; 

• d : destination
• s : source

---

Ou vous pouvez faire référence aux explications de w3school-canvas drawImage .