Comment ajouter une image sur la toile

Je suis en train d'expérimenter un peu avec la nouvelle toile élément HTML.

Je veux simplement ajouter une image à la toile, mais il 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 pas d'erreur JavaScript. L'image ne s'affiche pas.

Il doit être quelque chose de vraiment simple, je l'ai raté...

InformationsquelleAutor PeeHaa | 2011-05-15
  1. 186

    Peut-être que vous devriez avoir à attendre jusqu'à ce que l'image est 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);
  }
}

    I. e. dessiner l'image dans le onload de rappel de l'image.

    • Cela fonctionne avec des images récupérées sur l'URL?
    • plutôt remercier demander quoi que ce soit, essayer. Cela a parfaitement fonctionné. Assurez-vous de vérifier d'abord l'img de la taille de la source, sinon vous allez être recadrée, à moins que vous utilisez toutes les fonctions context.drawImage(base_image, 0, 0, 200, 200);. Qui serait base_img de 0px position, avec zone de 200x200px.
    • C'est exactement mon cas. J'étais le chargement de certaines données blob dans la toile à l'aide de new Image et je me demandais pourquoi il était toujours en me montrant une image précédente. S'avère même si je suis le chargement d'une image à partir d'une variable je dois encore attendre pour la onload arriver. Merci!!!!
    • Comment ajouter une image de style ?
    InformationsquelleAutor Thomas
  2. 4

    voici un 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, d'exemples de code pour dessiner une image sur la toile, tout en maintenant le ratio d'aspect:

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

    InformationsquelleAutor nvivekgoyal
  3. 1

    Dans mon cas, j'ai été confondu avec les paramètres de la fonction, qui sont:

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

    Si vous vous attendez à être

    context.drawImage(image, width, height);

    vous permettra de placer l'image juste en dehors de la toile avec les mêmes effets que décrite dans la question.

    InformationsquelleAutor Marc