var img = new Image(); img.src = '/images/backdrop.jpg'; ctx.drawImage (img, 0,0); Je voulais charger une image du disque local sur le canevas en utilisant le mécanisme de la boîte de dialogue plutôt que le chemin directement spécifié comme ci-dessus. J'ai essayé différentes sortes en utilisant javascript mais en vain, j'ai même essayé d'utiliser le type d'entrée comme fichier. Que puis-je essayer?Importer une image sur un canevas html5
Jetez un coup d'oeil ici:
Il est important d'avoir drawImage appel une fois l'image chargée:
var img = new Image();
img.onload = function() {
var ctx = document.getElementById('ctx').getContext('2d');
ctx.drawImage(img, 0, 0);
}
img.src = 'images/backdrop.jpg';
En outre, notez que vous voulez probablement utiliser images/backdrop.jpg au lieu de /images/backdrop.jpg (notez qu'il n'y a pas de barre oblique à l'avant), car l'utilisation de ce dernier image du répertoire racine, je suppose que ce n'est probablement pas où vos images sont.
En ce qui concerne le chargement d'une boîte de dialogue, vous pouvez remplacer la dernière ligne de ce qui précède avec quelque chose comme ceci:
var name = prompt("Enter the name of the file", "backdrop.jpg");
img.src = 'images/' + name;
De cette façon, l'utilisateur serait en mesure de saisir le nom du fichier d'image pour le charger. Bien sûr, vous devez avoir ce fichier dans votre dossier images.
Espérons que cela aide.
Vous pouvez toujours demander un fichier, le télécharger dans un dossier temporaire dans le serveur, puis le charger de nouveau sur la toile ...
La page pourrait fournir une barre de progression alors que le processus est en cours. (je pense que c'est la meilleure façon à cause de la sécurité sandbox)