H5 마케팅 활동에서는 사용자가 공유하거나 저장할 수 있는 사진이 생성되는 경우가 많습니다. 이 경우 두 가지 솔루션이 있습니다.
하나는 백엔드가 이미지를 생성하고 이미지 주소를 프런트엔드에 반환하여 표시하도록 하는 것입니다.
하나는 프런트 엔드를 독립적으로 병합하여 그림 디스플레이를 생성하는 것입니다. 이 문서에서는 이 솔루션을 주로 설명합니다.
데모
<!--생성 후 저장된 IMG--><img src= id=saveImages <img src=> <div class=name pa></div> <div class=msg pa></div></div> < 스타일>#saveContent{너비: 7.5rem; 높이: 12.27rem; 위치: 상대;}#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;텍스트 정렬: 중앙;왼쪽: 0;오른쪽: 0;}#saveContent .msg 범위{ 색상: #cf5350; 글꼴 크기: .36rem;}</style> <!--html2canvas 최신 버전 사용--><!--공식 웹사이트 https://html2canvas.hertzen.com/--><script src=//html2canvas.hertzen.com/dist/html2canvas.min. js> </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 Network를 지지해 주시길 바랍니다.