web-dev-qa-db-fra.com

Comment ajouter une image à la toile

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

Je veux simplement ajouter une image à la toile, 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 ne reçois aucune erreur JavaScript. L'image ne s'affiche tout simplement pas.

Ça doit être quelque chose de simple, j'ai manqué ...

javascripthtml5canvas
93
PeeHaa

Vous devriez peut-être attendre que l'image soit chargée avant de la dessiner. Essayez ceci à la place:

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. dessine l'image dans le rappel de chargement de l'image.

190
Thomas

voici l'exemple de code pour dessiner l'image sur la toile

$("#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 de saisie permettant de parcourir les images sur le système. Pour plus de détails sur l'exemple de code permettant de dessiner une image sur une toile tout en conservant les proportions:

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

4
nvivekgoyal

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

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

Si vous vous attendez à ce qu'ils soient

context.drawImage(image, width, height);

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

1
Marc