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,但是还是在手机上会有点问题,所以我还觉得用户自己保存图片比较好~
试了很久,觉得现在的实现其实还可以,你也可以把这个效果图给你们产品看,早日改需求吧~~~

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

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