ในกิจกรรมการตลาด 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;text-align: center;left: 0;right: 0;}#saveContent .msg span{ color: #cf5350; font-size: .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')); } }); } )})</สคริปต์>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network