Dans les activités marketing H5, une image est souvent générée pour que les utilisateurs puissent la partager ou la sauvegarder. Dans ce cas, il existe deux solutions.
La première consiste à laisser le backend générer des images et renvoyer une adresse d’image au frontend pour affichage.
La première consiste à fusionner le front-end indépendamment pour générer un affichage d'image. Cet article explique principalement cette solution.
démo
<!--IMG stocké après génération--><img src= id=saveImages <img src=> <div class=name pa></div> <div class=msg pa></div></div> < style>#saveContent{largeur : 7,5rem ; hauteur : 12,27rem; position : relative;}#saveContent img{ largeur : 100 % ;}#saveContent .name{couleur : #7c5234 ; taille de police : .3rem; haut : 6,55rem ; hauteur de ligne : .6rem ; alignement du texte : centre ; gauche : 0 ; droite : 0 ;}#saveContent .msg{couleur : #7c5234 ; taille de police : .24rem ; haut : 7.35rem;text-align : center;left : 0;right : 0;}#saveContent .msg span{ color : #cf5350 ; font-size : .36rem;}</style> <!--Utilisez la dernière version de html2canvas--><!--Site officiel https://html2canvas.hertzen.com/--><script src=//html2canvas.hertzen.com/dist/html2canvas.min. js> </script><script src=//static.leiting.com/lib/jquery-1.9.0.min.js></script><script>//Generate $(function(){ var isCreate=false; $('a.create' ).on('click',function(){ isCreate=true; $('#saveContent img').attr('src','//activity.leiting.com/wd/201904/data/images/pop/1.jpg'); $('#saveContent .name').html('aaaaaa'); ); $('#saveContent .msg').html('bbbbbbbbbb'); html2canvas(document.getElementById('saveContent'), { onrendered: function(ca) { $('#saveImages').attr('src',ca.toDataURL('image/jpeg')); } } }); )})</script>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.