Comment ajouter une image au canevas

106

J'expérimente un peu le nouvel élément canvas en 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 n'obtiens aucune erreur JavaScript. L'image ne s'affiche tout simplement pas.

Ce doit être quelque chose de vraiment simple que j'ai manqué ...

javascript html canvas PeeHaa
la source

Réponses:

219

Vous devriez peut-être 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);
  }
}

Ie dessine l'image dans le rappel de chargement de l'image.

Thomas
la source
6
@swogger plutôt merci de demander quoi que ce soit, essayez. Cela a parfaitement fonctionné. Assurez-vous de vérifier d'abord la taille img de la source, sinon elle sera rognée à moins que vous n'utilisiez la fonction complète context.drawImage(base_image, 0, 0, 200, 200);. Cela dessinerait base_img à partir de la position 0px, avec une zone de dessin de 200x200px.
m3nda
1
C'était exactement mon cas. Je chargeais des données blob dans le canevas en utilisant new Imageet je me demandais pourquoi il me montrait toujours une image précédente. Il s'avère que même si je charge une image à partir d'une variable, je dois encore attendre que onloadcela se produise. Je vous remercie!
aexl
Comment ajouter un style d'image?
Sagar Rawal
6

voici l'exemple de code pour dessiner une image sur 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 d'entrée qui peut être utilisé pour parcourir l'image sur le système. Pour plus de détails sur l'exemple de code pour dessiner une image sur un canevas tout en conservant le rapport hauteur / largeur:

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

nvivekgoyal
la source
1

Dans mon cas, je me suis trompé sur 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 à l'extérieur du canevas avec les mêmes effets que ceux décrits dans la question.

Marc
la source
0

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 l'image d'abord après la création du canevas, le canevas ne pourra pas transmettre toutes les données d'image pour dessiner l'image. Vous devez donc d'abord charger toutes les données fournies avec l'image, puis vous pouvez utiliser drawImage ()

Anthony Gedeon
la source