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,但是还是在手机上会有点问题,所以我还觉得用户自己保存图片比较好~

试了很久,觉得现在的实现其实还可以,你也可以把这个效果图给你们产品看,早日改需求吧~~~

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

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