В маркетинговой деятельности H5 часто создается изображение, которым пользователи могут поделиться или сохранить. В этом случае есть два решения.
Один из них — позволить серверной части генерировать изображения и возвращать адрес изображения во внешний интерфейс для отображения.
Один из них — независимое объединение внешнего интерфейса для создания изображения. В этой статье в основном объясняется это решение.
демо
<!--IMG сохраняется после генерации--><img src= id=saveImages <img src=> <div class=name pa></div> <div class=msg pa></div></div> < стиль>#saveContent{ширина: 7,5рем; высота: 12,27рем; позиция: относительная;}#saveContent img{ширина: 100%;}#saveContent .name{color: #7c5234;font-size: .3rem;top: 6.55rem;line-height: .6rem;text-align: center;left: 0;right: 0;}#saveContent .msg{цвет: #7c5234;размер шрифта: .24rem;верх: 7.35rem;text-align: center;left: 0;right: 0;}#saveContent .msg span{color: #cf5350; размер шрифта: .36rem;</style> <!--Используйте последнюю версию html2canvas--><!--Официальный сайт 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>//Сгенерировать $(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>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.