html转图片/html2canvas的使用/星座测试/类似于损友圈的活动

https://try.fishqc.com/Activity/constellation ---成品

电脑上录的gif

有借鉴的链接,很多,下面这个还不错~先别看，尊重下我先~~~~
https://juejin.im/post/5a17c5e26fb9a04527254689

需求:
点击那个长按保存的按钮,将上方的测试报告保存到手机相册~

第一步:
如何将html转成图片?
a.先随便下载一个到一个文件夹里面 http://html2canvas.hertzen.com/
npm install --save html2canvas
然后在把这个html2canvas.min.js放到你的项目里面

b.开始转化

                   <div class="button7" style="padding: 0 3%;"> 
            <div id="saveThePic">
                <div>
                    <a  href="javascript:;">
                        <img src="/img/star/resultSave.png" alt=""  id="other" style="width:100%" id="getWidth">
                    </a>
                </div>
                <div id="test">
                    <div>
                        <a  href="javascript:;">
                            <img src="/img/star/resultSave.png" alt=""  style="width:100%">
                        </a>
                    </div>
                    <div class="button10">
                        <a  href="javascript:;">
                            <span class="authorTitle" style="color: #10302c;">{{@getUserName}}的脱单幸运物</span>
                        </a>
                    </div>
                    <div class="button15">
                        <a  href="javascript:;">
                            <span class="authorTitle15">{{@getProductName}}</span>
                        </a>
                    </div>
                    <div class="button13">
                        <a  href="javascript:;">
                            <img ms-attr="{src:@getProductImg}" alt="" class="indexTitle indexTitleGetPic"  >
                        </a>
                    </div>
                    <div class="button11">
                        <a  href="javascript:;">
                            <span class="feelingExplain" >{{@getUserName}}{{@getContentInsert}}</span>
                        </a>
                    </div>
                    <div class="button12">
                        <a  href="javascript:;">
                            <span  class="feelingExplain" >{{@getStarInsert}}</span>    
                        </a>
                    </div>
                    <div class="button14">
                        <a  href=""  href="javascript:;">
                            <img src="/img/star/code.png" alt="" class="indexTitle indexTitleGetCode"  >
                        </a>
                    </div>  
                </div>
            </div>                      
        </div>

var getheight=$('#getWidth').height()//这里我是将那张需要保存的所有元素里面的背景图.
window.onload=function(getheight){ //这里的转化我是进入页面加载所有的完了就开始转,其实应该做一个load更好~
  takeScreenshot("saveThePic","filename.png",'other','test',getheight)//saveThePic是保存的图,这里要写一个下载的图片后缀哦/other是这个saveThePic下面的图/test是这个需要转成图片的代码子元素
}
function takeScreenshot(creatId,filename,otherId,testid,getheight) {
    html2canvas(document.getElementById(creatId)).then(function(canvas) {  
          var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url 　
          var saveLink = document.createElement( 'a');                
          var other=document.getElementById(otherId)  
          $('#'+testid).hide()   
          $('#'+otherId).show() 
        //    $('#'+creatId).css("height", getheight+'px')             
          other.src=imgUri; 
          saveLink.click(); 
   })
}

解释一下html吧.这里需要注意的就是resultSave.png是一张背景图,然后背景图上面定位了一下文字图片，二维码等等,这个二维码也是我用软件直接转成的图片导进来的.
我是等cavans的图片转化成功之后,将所有要转化的图片隐藏(对应id为test),再之前我会先获取resultSave.png的高度,把他的高度赋给saveThePic的高度.转化后的img一定要写高度
还有就是在pc端确实可以进行图片下载,但是在手机端不会点击一个按钮自动保存的,我看了一篇文章说,把那张转化要的图浮在button上,然后透明度opacity设为0,但是还是在手机上会有点问题,所以我还觉得用户自己保存图片比较好~
试了很久,觉得现在的实现其实还可以,你也可以把这个效果图给你们产品看,早日改需求吧~~~

如果硬是要实现,可以 考虑,先直接渲染,然后定位到按钮那里长按保存试试,因为刚开始我是试的点击再长按 ~~~加油~

七夕快乐,注意保护身体健康哦,乖~

转载于:https://www.cnblogs.com/antyhouse/p/9473641.html