Afficher l'image en toile avec Javascript?

Je veux être en mesure de cliquer sur un bouton sur ma page et de charger une image dans un canvas à certains des coordonnées X,Y?

Le code suivant est ce que j'ai ci-dessous. Je souhaite que l'image soit en image/photo.jpg ou dans le même répertoire, mais de préférence dans un sous-répertoire de la page principale.

**Question: Comment faire un JPG affiche dans une zone de travail avec le clic d'un bouton sur la page web?

Code:

<!DOCTYPE html>
<html>

<script>
    function draw(){  
        var ctx = document.getElementById("myCanvas").getContext("2d");  
        var img = new Image():  
      // img.src = "2c.jpg";  
        img.src = "/images/2c.jpg";  

        ctx.drawImage(img,0,0);  
    }


</script>


<body background="Black">

<div align="center">
    <button type="button" onclick="draw()">Show Image on Canvas</button> 

    <canvas id="myCanvas" width="900" height="400" style="border:2px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="20px Arial";

    ctx.fillText("Royal Flush     $",500,50);
    ctx.fillText("Striaght Flush  $",500,80);
    ctx.fillText("Flush           $",500,110);
    ctx.fillText("Four of a Kind  $",500,140);
    ctx.fillText("Full House      $",500,170);
    ctx.fillText("Three of a Kind $",500,200);
    ctx.fillText("Two Pair        $",500,230);
    ctx.fillText("Pair of ACES    $",500,260);


    ctx.rect(495,10,270,350);
    ctx.stroke();
</script>

</body>
</html>

Mars 6th, 2014 Code:

Comment le code suivant ne fonctionne pas. Avez-vous d'avoir une étiquette d'identité sur la Toile. La page d'affichage, mais pour une raison quelconque, l'image ne sera pas lorsque le bouton est cliqué. L'image est dans le même répertoire que mon index.html le fichier est en.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
canvas{
border: 5px solid black;
}
</style>
</html>
<button id="galaxy">Add image #1</button>
<button id="circles">Add image #2</button><span></span>
<canvas width="500" height="500"></canvas>
<script>
var Images = {};
function loadImages(list){
var total = 0;
document.querySelector("span").innerText = "...Loading...";
for(var i = 0; i < list.length; i++){
var img = new Image();
Images[list[i].name] = img;
img.onload = function(){
total++;
if(total == list.length){
document.querySelector("span").innerText = "...Loaded.";
}
};
img.src = list[i].url;
}
}
function drawImage(img){
var ctx = document.querySelector("canvas").getContext("2d");
ctx.drawImage(Images[img], 0, 0, 50, 50);
}
loadImages([{
name: "2c.jpg",
url: "mp.jpg"
},{
name: "mp.jpg",
url: "mp.jpg"
}]);
document.querySelector("#galaxy").addEventListener("click", function(){
drawImage("galaxy");
});
document.querySelector("#circles").addEventListener("click", function(){
drawImage("weirdCircles");
});
</script>   
</html>
  • var img = new Image: <- ;
InformationsquelleAutor | 2014-03-06
  1. 12

    Attendre jusqu'à ce que l'image est chargée avant de les dessiner:

    var img = new Image();
img.onload = function(){        /*or*/  img.addEventListener("load", function(){
ctx.drawImage(img,0,0);                 ctx.drawImage(img,0,0);
};                                      };
img.src = "/images/2c.jpg";

    Démo: http://jsfiddle.net/DerekL/YcLgw/

    Si vous avez plus d'une image dans votre jeu,

    Il est préférable de précharger toutes les images avant qu'il ne commence.

    Précharger les images: http://jsfiddle.net/DerekL/uCQAH/ (Sans jQuery: http://jsfiddle.net/DerekL/Lr9Gb/)

    Si vous êtes plus familier avec La programmation orientée objet: http://jsfiddle.net/DerekL/2F2gu/

    function ImageCollection(list, callback){
var total = 0, images = {};   //private :)
for(var i = 0; i < list.length; i++){
var img = new Image();
images[list[i].name] = img;
img.onload = function(){
total++;
if(total == list.length){
callback && callback();
}
};
img.src = list[i].url;
}
this.get = function(name){
return images[name] || (function(){throw "Not exist"})();
};
}
//Create an ImageCollection to load and store my images
var images = new ImageCollection([{
name: "MyImage", url: "//example.com/example.jpg"
}]);
//To pick and draw an image from the collection:
var ctx = document.querySelector("canvas").getContext("2d");
ctx.drawImage(images.get("MyImage"), 0, 0);
    • L'image img.src arrivé, premier ou le onload de venir d'abord parce que comment il dessine depuis l'img.src est après l'img.onload. Je ne suis pas le voir ici.
    • Juste essayé et ça ne fonctionne pas non plus. Je vais passé le nouveau code ou script ci-dessus.
    • il faudrait d'abord parce que votre image sera de commencer le chargement dès que vous mettez le src.
    • Pourquoi vous mettez-vous à la src deux fois?
    • Je suis nouveau sur le javascript et qui semble de bite les yeux sur moi. Ainsi, lorsque vous avez l'img.src, vous devez avoir une img.onload = function directement au-dessus. C'est ce que je ne suis pas certain, mais il ne fonctionne pas de toute façon.
    • Fondamentalement, oui. Vous devez attendre jusqu'à ce que l'image est chargée avant le dessin. Jetez un oeil à la démo dans ma réponse.
    • Combien de temps faut-il à la charge, car rien après 1 minutes. est-il vraiment un moyen rapide de faire le code de la charge. Je vais faire un jeu de poker et le besoin de cartes pour les retourner rapide, juste comme dans l'vegas pièce op jeux.
    • Si vous faites un jeu, alors vous devriez avoir préchargé toutes les ressources premières. (C'est ce que les écrans de chargement dans les jeux en ligne sont pour) Néanmoins, les images ne doivent pas prendre une minute pour charger.
    • C'est une façon de préchargement des images: jsfiddle.net/DerekL/uCQAH
    • Je n'ai toujours pas à la faire fonctionner. loadImages([{ nom: "2c.jpg", url: "2c.jpg" }]); Lorsque vous composez ce code, ce qui est bien avec les [] autour de ces paramètres et la liste peut être n'importe quel nombre d'éléments ou d'un tableau.
    • Mon code utilise jQuery pour faciliter l'élément de sélection de fins. Si vous n'avez pas de jQuery inclus, vous devrez modifier tous les $ natif de méthodes ou de supprimer les lignes de débogage comme $().text: jsfiddle.net/DerekL/Lr9Gb
    • Et n'oubliez pas d'emballer votre code avec onload de sorte que les éléments sont en place lors de la fixation d'auditeurs.
    • Il a essayé votre nouvel exemple que vous aviez sélectionné et de rien. La page n'venir avec le bouton et la toile est là, mais rien ne se passe lorsque je clique sur un bouton. Je vais poster ci-dessus.
    • Il ne fonctionne pas c'est parce que vous n'avez pas envelopper la totalité de votre code avec onload ou de la mettre à la fin de body. Vous devez attendre que la page à la fin du chargement avant de faire quelque chose
    • Je l'ai déplacé vers le bas et ne vois toujours pas une image, mais sur une couple de fois je l'ai fait voir le chargé ligne de texte.
    • Je vois le problème. La fonction que j'ai faite vous permet de nommer vos images afin que vous puissiez l'utiliser plus tard dans l'avenir. Dans votre code, vous êtes toujours en utilisant les noms dans ma démo: drawImage("galaxy");. Vous devez modifier les noms que vous avez défini: 2c.jpg et mp.jpg.

    InformationsquelleAutor Derek 朕會功夫