H5 マーケティング活動では、ユーザーが共有または保存できるように画像が生成されることがよくあります。この場合、2 つの解決策があります。
1 つは、バックエンドに画像を生成させ、表示のために画像アドレスをフロントエンドに返す方法です。
1 つは、フロントエンドを独立してマージして画像表示を生成する方法です。この記事では、この解決策を主に説明します。
デモ
<!-- 生成後に保存される IMG --><img src= id=saveImages <img src=> <div class=name pa></div> <div class=msg pa></div></div> <スタイル>#saveContent{幅: 7.5rem; 高さ: 12.27rem; 位置: 相対;}#saveContent{ 幅: 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; font-size: .36rem;}</style> <!-- 最新バージョンの html2canvas を使用してください --><!-- 公式 Web サイト 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>//Generate $(function(){ var isCreate=false; $('a.create' ).on('クリック',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 をご支援いただければ幸いです。