In H5 marketing activities, a picture is often generated for users to share or save. In this case, there are two solutions.
One is to let the backend generate images and return an image address to the frontend for display.
One is to merge the front-end independently to generate a picture display. This article mainly explains this solution.
demo
<!--IMG stored after generation--><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> <!--Use the latest version of html2canvas--><!--Official 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>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.