Le canevas HTML5 nouvellement ajouté est une fonction puissante. On estime que tout le monde l'utilise tous les jours, mais la fréquence n'est pas élevée, mais elle est parfois utilisée pour synthétiser des images. désordonné, donc le dessin sur toile couramment utilisé, le dessin de texte, La fonction de sauvegarde a été encapsulée, et j'en suis actuellement assez satisfait. Il peut effectuer rapidement des tâches de dessin sur toile et répondre calmement aux changements d'exigences. Il ne nécessite qu'une configuration simple.
li-canvas.jsLa fonction canevas de Html5 est encapsulée pour faciliter des fonctions telles que l'image unique, le dessin multi-images, le dessin d'images à coins arrondis, le dessin de texte multiligne, le retour à la ligne automatique, l'enregistrement et le téléchargement d'images, etc.
Adresse Github : github.com/501351981/l…
Fonctions principales• Dessin d'images : dessin d'images uniques/multiples, dessin d'images à coins arrondis. • Dessin de texte : dessin de texte en plusieurs paragraphes, retour à la ligne automatique. .
installation npm# npm install npm install --save li-canvasdevis direct
Importez des fichiers js directement en HTML.
<script src=dist/li-canvas.js></script>Comment utiliser Instancier
Lorsque vous utilisez li-canvas, vous devez d'abord instancier l'objet, new LiCanvas(canvas_id,options), transmettre l'identifiant du canevas, les options sont facultatives, vous pouvez définir l'arrière-plan du canevas et le style de texte par défaut, etc.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= nouveau LiCanvas('test') </script></body> ... Dessin d'image• Dessinez une seule image
Appelez addDrawImageTask(image), où le paramètre image est un objet, y compris
src : adresse URL de l'image
x : La coordonnée x du coin supérieur gauche de l'image sur la toile
y : La coordonnée y du coin supérieur gauche de l'image sur la toile
largeur : largeur du dessin d'image
hauteur : hauteur du dessin d'image
borderRadius : rayon du coin de l'image
Lorsque addDrawImageTask(image) est appelé, l'image n'est pas dessinée immédiatement, mais une tâche de dessin est ajoutée. La tâche de dessin n'est exécutée que lorsque draw(callback) est appelée et la fonction de rappel est appelée lorsque l'exécution est terminée.
Pourquoi faire ça ? Étant donné que l'image doit d'abord être téléchargée lors du dessin, il s'agit d'une opération asynchrone, elle est donc ajoutée en premier à la liste des tâches, et lorsque draw() est appelée, elle est exécutée dans l'ordre dans lequel les tâches sont ajoutées.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//ou l'adresse url de l'image x:0,//coordonnée x du coin supérieur gauche y:0,//coordonnée y du coin supérieur gauche largeur du coin : 1563,/ /Largeur du dessin de l'image, hauteur : 1180,//Hauteur du dessin de l'image borderRadius : 0 //Rayon du coin de l'image} var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //Ajoutez une tâche de dessin et le dessin n'est pas effectué immédiatement canvas.draw(()=>{ console.log(drawing terminé) }) </script></body> ...• Dessinez plusieurs graphiques
Vous pouvez appeler addDrawImageTask(image) plusieurs fois de suite ou transmettre un tableau d'images.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y :0, largeur :1563, hauteur :1180, borderRadius :0 } var img2={ src:http://*****.com/***.png, x:0, y:0, largeur : 1563, hauteur : 1180, borderRadius :0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, largeur:100, hauteur:100, borderRadius:0 }, { src:http://*****.com/***.png, x:0, y:0, largeur:100, hauteur:100, borderRadius:0 } ] var canvas=new LiCanvas('test') canvas.addDrawImageTask(img1) canvas.addDrawImageTask(img2) //Appels multiples pour réaliser un dessin multi-images canvas.addDrawImageTask(imgs) //Le dessin multi-images peut également être réalisé en passant directement un tableau canvas.draw(()=>{ console.log(drawing terminé) }) </script> </body> ...• Dessinez des images arrondies ou circulaires
Définissez simplement borderRadius
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:50 //Définit le rayon du congé lorsque le rayon du congé est la moitié de la longueur du côté du carré, c'est un cercle} var canvas=new LiCanvas('test') canvas .addDrawImageTask(img1) canvas.draw(()=>{ console.log(dessin terminé) }) </script></body> ... Dessiner du texte•Dessiner un texte
Appelez addDrawTextTask(text,style)
texte : texte à dessiner
style : style de texte, incluant x : coordonnée x du coin supérieur gauche de la position de départ du dessin du texte
y : La coordonnée y du coin supérieur gauche de la position réelle du dessin du texte
Largeur : la largeur d'une ligne de texte si elle dépasse la largeur, elle sera automatiquement renvoyée à la ligne.
fontSize : taille du texte, entier, l'unité est px
fontWeight : épaisseur du texte en gras, plus gras, etc. ou 400, 500, 600... identique à CSS font-weight
fontFamily : police de texte, identique à CSS
lineHeight : hauteur de ligne, entier, unité px
couleur: couleur
marginBottom : s'il y a plusieurs paragraphes de texte, vous pouvez également spécifier la distance entre les paragraphes
Le dessin de texte est également asynchrone. Il n'est réellement dessiné que lorsque draw(callback) est appelé.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(texte à dessiner, { x:110, y:496, largeur:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, couleur : '#1a1a1a', margeBottom:40 }) canvas.draw(()=>{ console.log(dessin terminé) }) </script></body> ...• Dessinez plusieurs paragraphes de texte
Méthode 1 : Appelez à plusieurs reprises addDrawTextTask(text, style), comme ci-dessus
Méthode 2 : le texte peut être transmis dans un tableau et le style peut être partagé
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask([Paragraphe de texte à dessiner 1, Paragraphe de texte à dessiner 2],{ x:110, y:496, width:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,' Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(dessin terminé) }) </script></body> ...Le style peut également transmettre une valeur par défaut lorsque l'objet est instancié pour éviter de définir à plusieurs reprises certains styles partagés.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask (paragraphe de texte à dessiner 1,{ x :110, y :496, largeur :1340, }) canvas.addDrawTextTask(Paragraphe de texte à dessiner 2,{ x:110, y:696, width:1340, }) canvas.draw(()=>{ console.log(dessin terminé) }) </script></ corps>...S'il y a un paragraphe de texte dans plusieurs paragraphes qui doit être défini dans des styles différents, vous pouvez également spécifier le style séparément, comme suit, est-il très flexible~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, couleur:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask([{ text:To Texte du paragraphe dessiné 1, taille de police : 60 }, texte paragraphe 2 à dessiner, texte paragraphe 3 à dessiner],{ x:110, y:496, width:1340, }) canvas.draw(()=>{ console.log(dessin terminé) }) </script></body> ...Enregistrer l'image téléchargée
• Télécharger des photos
Télécharger en tant qu'image png : saveToPng (nom du fichier)
Télécharger sous forme d'image jpeg : saveToJpeg (nom du fichier)
Télécharger sous forme d'image GIF : saveToGif (nom du fichier)
Remarque : le téléchargement d'images doit être appelé dans la fonction de rappel de draw() pour prendre effet.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, largeur:1563, hauteur:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng(li-canvas) }) </script ></corps> ...•Obtenir des données d'image
Parfois, nous ne souhaitons pas télécharger l'image. Par exemple, dans le navigateur WeChat, nous souhaitons en fait que l'utilisateur appuie longuement sur l'image pour la sauvegarder. À ce stade, nous souhaitons que les données d'image synthétisées par Canvas soient insérées. la source d'img.
Appelez : getImageData() pour obtenir les données d'image synthétisées
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width : 782px;height : 590px;border : 1px rouge uni></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, largeur:1563, hauteur:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) toile. draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...Adresse Github : github.com/501351981/l…
RésumerCe qui précède est ce que l'éditeur vous présente, comment réaliser facilement une image unique, plusieurs images, un dessin d'image à coins arrondis, un texte sur une seule ligne, un texte multiligne, etc. en HTML5 via li-canvas. J'espère que cela vous sera utile. à vous. Si vous avez des questions, laissez-moi un message et je vous répondrai à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !