Hier, j'ai présenté un plug-in pour générer des codes QR, QRCode.js, qui est dessiné à l'aide de HTML5 Canvas. Ainsi, le protagoniste d’aujourd’hui est la toile – l’application pratique de la toile.
1. Téléchargez le code QRHTMLCanvasElement fournit la méthode toDataURL, qui renvoie un URI de données contenant le format de représentation d'image spécifié par le paramètre type. Grâce à cette méthode, nous pouvons générer une image de code QR et la télécharger. Les exemples sont les suivants :
/*html*/<div id=qrcode>div><a href=javascript:; download=QR code id=down>Télécharger le code QR</a>/*js*/var canvas = document.getElementsByTagName(' canvas' )(0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png') 2. Ajouter un filigrane aux imagesVous pouvez facilement ajouter des filigranes aux images en utilisant les méthodes fillText et drawImage de Canvas. Les exemples sont les suivants :
/*html*/<canvas id=canvas></canvas>/*js*/var img = new Image(); // Créer un élément img var canvas = document.getElementById('canvas')var ctx = canvas.getContext ('2d');img.src = 'monImage.png';img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; //Définir le texte du filigrane ctx.fillText (grand frontal, 1100, 260)}C'est tout pour aujourd'hui. N'hésitez pas à partager d'autres applications de Canvas. J'espère que cela sera utile à l'apprentissage de chacun, et j'espère également que tout le monde soutiendra le réseau VeVb Wulin.