Nas atividades de marketing H5, muitas vezes é gerada uma imagem para os usuários compartilharem ou salvarem. Nesse caso, existem duas soluções.
Uma é permitir que o backend gere imagens e retorne um endereço de imagem ao frontend para exibição.
Uma é mesclar o front-end de forma independente para gerar uma exibição de imagem. Este artigo explica principalmente esta solução.
demonstração
<!--IMG armazenado após a geração--><img src= id=saveImages <img src=> <div class=name pa></div> <div class=msg pa></div></div> < estilo>#saveContent{largura: 7,5rem altura: 12,27rem posição: relativa;}#saveContent img{ largura: 100%;}#saveContent .name{color: #7c5234;font-size: .3rem;top: 6,55rem;line-height: .6rem;text-align: center;left: 0;right: 0;}#saveContent .msg{cor: #7c5234;tamanho da fonte: .24rem;topo: 7.35rem;text-align: center;left: 0;right: 0;}#saveContent .msg span{ color: #cf5350; font-size: .36rem;}</style> <!--Use a versão mais recente do html2canvas--><!--Site 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>//Gerar $(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.msg').html('bbbbbbbbbb'); html2canvas(document.getElementById('saveContent'), { onrendered: function(ca) { $('#saveImages').attr('src',ca.toDataURL('image/jpeg')); } } }); )})</script>O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.