En las actividades de marketing de H5, a menudo se genera una imagen para que los usuarios la compartan o la guarden. En este caso, existen dos soluciones.
Una es permitir que el backend genere imágenes y devolver una dirección de imagen al frontend para su visualización.
Una es fusionar el front-end de forma independiente para generar una visualización de imágenes. Este artículo explica principalmente esta solución.
manifestación
<!--IMG almacenado después de la generación--><img src= id=saveImages <img src=> <div class=nombre pa></div> <div class=msg pa></div></div> < estilo>#saveContent{ancho: 7,5rem; alto: 12,27rem; posición: relativa;}#saveContent img{ ancho: 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;tamaño de fuente: .24rem;arriba: 7.35rem;text-align: center;left: 0;right: 0;}#saveContent .msg span{ color: #cf5350; font-size: .36rem;}</style> <!--Utilice la última versión de html2canvas--><!--Sitio web oficial 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>//Generar $(function(){ var isCreate=false; $('a.create' ).on('hacer clic',función(){ 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>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.