Comment définir un style de remplissage (texture) à une URI de données existantes dans la toile

Question

j'ai une données PNG existant URI comme:

let dataURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAD+qAB849H0AAAAAXRSTlMAQObYZgAAAAxJREFUCNdjSEsgiACnWAlJEDYe/gAAAABJRU5ErkJggg=="; 

Je veux l'utiliser comme une texture dans ma toile que je fais certains tirent des opérations sur. J'ai essayé quelques choses avec canvas.fillStyle, mais je ne vois pas cela fonctionner. Les couleurs fonctionnent bien.

Quel serait le moyen d'utiliser un dataURI comme texture dans les opérations de dessin?

Answer 1

Vous devez charger comme une première image (assurez-vous de gérer l'aspect asynchrone), donc essentiellement à définir une image comme motif:

var img = new Image; 
img.onload = imageIsReady; 
img.src = "data: ....."; // full uri here 

function imageIsReady() { 
    var pattern = ctx.createPattern(img, "repeat"); 
    ctx.fillStyle = pattern; 
    // fill, etc. 
}