Bei H5-Marketingaktivitäten wird häufig ein Bild generiert, das Benutzer teilen oder speichern können. In diesem Fall gibt es zwei Lösungen.
Eine besteht darin, das Backend Bilder generieren zu lassen und eine Bildadresse zur Anzeige an das Frontend zurückzugeben.
Eine besteht darin, das Frontend unabhängig zusammenzuführen, um eine Bildanzeige zu generieren. In diesem Artikel wird hauptsächlich diese Lösung erläutert.
Demo
<!--IMG wird nach der Generierung gespeichert--><img src= id=saveImages <img src=> <div class=name pa></div> <div class=msg pa></div></div> < style>#saveContent{width: 7.5rem; height: 12.27rem; position: relative;}#saveContent img{ width: 100 %;}#saveContent .name{color: #7c5234;font-size: .3rem;top: 6.55rem;line-height: .6rem;text-align: center;left: 0;right: 0;}#saveContent .msg{color: #7c5234;font-size: .24rem;top: 7.35rem;text-align: center;left: 0;right: 0;}#saveContent .msg span{ color: #cf5350; font-size: .36rem;}</style> <!--Verwenden Sie die neueste Version von html2canvas--><!--Offizielle Website 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>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.