Gestern habe ich ein Plug-in zum Generieren von QR-Codes vorgestellt, QRCode.js, das mit Hilfe von HTML5 Canvas gezeichnet wird. Der heutige Protagonist ist also Leinwand – die praktische Anwendung von Leinwand.
1. Laden Sie den QR-Code herunterHTMLCanvasElement stellt die toDataURL-Methode bereit, die einen Daten-URI zurückgibt, der das durch den Typparameter angegebene Bilddarstellungsformat enthält. Mit dieser Methode können wir ein QR-Code-Bild generieren und herunterladen. Beispiele sind wie folgt:
/*html*/<div id=qrcode>div><a href=javascript:; download=QR code id=down>QR-Code herunterladen</a>/*js*/var canvas = document.getElementsByTagName(' canvas' )[0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png') 2. Fügen Sie den Bildern Wasserzeichen hinzuSie können Bildern ganz einfach Wasserzeichen hinzufügen, indem Sie die Methoden fillText und drawImage von Canvas verwenden. Beispiele sind wie folgt:
/*html*/<canvas id=canvas></canvas>/*js*/var img = new Image(); // img-Element erstellen var canvas = document.getElementById('canvas')var ctx = canvas.getContext ('2d');img.src = 'myImage.png';img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; //Wasserzeichentext setzen ctx.fillText(large front end, 1100, 260)}Das ist alles für heute. Teilen Sie uns gerne weitere Canvas-Anwendungen mit. Ich hoffe, dass es zum Lernen aller beitragen wird, und ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.