Comment changer l’opacité (alpha, transparence) d’un élément dans un élément canvas après qu’il ait été dessiné?

En utilisant l’élément HTML5 , je voudrais charger un fichier image (PNG, JPEG, etc.), le dessiner sur le canevas de manière totalement transparente, puis le faire apparaître. J’ai trouvé comment charger l’image et dessiner à la canvas, mais je ne sais pas comment changer son opacité une fois qu’elle a été dessinée.

Voici le code que j’ai jusqu’à présent:

 var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var c = canvas.getContext('2d'); c.globalAlpha = 0; var img = new Image(); img.onload = function() { c.drawImage(img, 0, 0); } img.src = 'image.jpg'; } 

Quelqu’un voudra-t-il me diriger dans la bonne direction, comme une propriété à définir ou une fonction à appeler qui changera l’opacité?

Je cherche également une réponse à cette question, (pour clarifier, je veux être capable de dessiner une image avec une opacité définie par l’utilisateur, comme par exemple comment dessiner des formes avec une opacité) si vous dessinez avec des formes primitives couleur avec alpha pour définir la transparence. Pour autant que j’ai conclu en ce moment, cela ne semble pas affecter le dessin de l’image.

 //works with shapes but not with images ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; 

J’ai conclu que la configuration de globalCompositeOperation fonctionne avec des images.

 //works with images ctx.globalCompositeOperation = "lighter"; 

Je me demande s’il existe une troisième manière de définir la couleur pour pouvoir teinter facilement les images et les rendre transparentes.

MODIFIER:

Après avoir creusé plus loin, j’ai conclu que vous pouvez définir la transparence d’une image en définissant le paramètre globalAlpha AVANT de dessiner l’image:

 //works with images ctx.globalAlpha = 0.5 

Si vous voulez obtenir un effet de fondu au fil du temps, vous avez besoin d’une sorte de boucle qui modifie la valeur alpha, c’est assez simple, la fonction setTimeout est un moyen d’y parvenir pour la créer. heures supplémentaires.

Quelques exemples de code plus simples pour utiliser globalAlpha :

 ctx.save(); ctx.globalAlpha = 0.4; ctx.drawImage(img, x, y); ctx.restore(); 

Si vous avez besoin d’ img pour être chargé:

 var img = new Image(); img.onload = function() { ctx.save(); ctx.globalAlpha = 0.4; ctx.drawImage(img, x, y); ctx.restore() }; img.src = "http://..."; 

Remarques:

  • Définissez le 'src' dernier pour garantir que votre gestionnaire onload est appelé sur toutes les plates-formes, même si l’image est déjà dans le cache.

  • Emballez les modifications dans des choses comme globalAlpha entre une save et une restore (en fait, utilisez-les beaucoup), pour vous assurer de ne pas surcharger les parameters d’ailleurs, en particulier lorsque des bits de code de dessin seront appelés à partir d’événements.

Modifier: La réponse marquée comme “correcte” n’est pas correcte.

C’est facile à faire. Essayez ce code en remplaçant “ie.jpg” par la photo que vous avez sous la main:

 < !DOCTYPE HTML>         

La clé est la propriété globalAlpha.

Testé avec IE 9, FF 5, Safari 5 et Chrome 12 sous Win7.

Le post est vieux jusqu’à présent je vais aller avec ma suggestion. La suggestion est basée sur la manipulation de pixels dans le contexte 2d canvas. De MDN:

Vous pouvez manipuler directement les données de pixel dans les canvass au niveau de l’octet

Pour manipuler les pixels, nous utiliserons deux fonctions ici – getImageData et putImageData

Utilisation de la fonction getImageData:

var myImageData = context.getImageData (gauche, haut, largeur, hauteur);

et la syntaxe putImageData:

context.putImageData (myImageData, dx, dy); // dx, dy – x et y offset sur votre canvas

contexte est votre canvas 2d contexte

Donc, pour obtenir des valeurs bleues et alpha vertes rouges, nous allons procéder comme suit:

 var r = imageData.data[((x*(imageData.width*4)) + (y*4))]; var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1]; var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2]; var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3]; 

x est x offset, y est y offset sur la canvas

Nous avons donc du code rendant l’image à moitié transparente

 var canvas = document.getElementById('myCanvas'); var c = canvas.getContext('2d'); var img = new Image(); img.onload = function() { c.drawImage(img, 0, 0); var ImageData = c.getImageData(0,0,img.width,img.height); for(var i=0;i 

Vous pouvez vous faire posséder des "shaders" - voir l'article complet de MDN ici

Vous pouvez. Le canevas transparent peut être rapidement affiné en utilisant une opération composite globale sans destination . Ce n’est pas parfait à 100%, parfois il laisse des traces, mais il peut être modifié en fonction de ce qui est nécessaire (utiliser “source-over” et le colorer en blanc avec alpha à 0.13, puis fondre pour préparer le canevas).

 // Fill canvas using 'destination-out' and alpha at 0.05 ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = "rgba(255, 255, 255, 0.05)"; ctx.beginPath(); ctx.fillRect(0, 0, width, height); ctx.fill(); // Set the default mode. ctx.globalCompositeOperation = 'source-over'; 

Si vous utilisez la bibliothèque jCanvas , vous pouvez utiliser la propriété opacity lors du dessin. Si vous avez besoin d’un effet de fondu en plus, redessinez simplement avec des valeurs différentes.

Vous ne pouvez pas C’est le mode graphique immédiat. Mais vous pouvez en quelque sorte le simuler en dessinant un rectangle sur la couleur d’arrière-plan avec une opacité.

Si l’image dépasse une couleur constante, elle devient un peu plus compliquée. Vous devriez pouvoir utiliser les méthodes de manipulation des pixels dans ce cas. Enregistrez simplement la zone avant de dessiner l’image, puis mélangez-la avec une opacité après.