最近遇到一个需求，是关于运势测试的，将用户信息保存在底部图上，在微信中长按保存信息会与图片一起被保留下来。
图示：
静态页面
image.png
保存下来的图片
image.png
我们需要用到的资源
- js
- https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js
- canvas2image.js
- base64.js
网上都可以找到资源
心路历程
从完全不懂这个技术到做出来大约花了一天的时间，参考网上的资源大体完成了功能
代码
<!DOCTYPE html>
<html>
<head>
<title>运势结果</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/result.css">
<style type="text/css">
#view{
width:100%;
height:100%;
background-size:100% 100%;
z-index: 99;
/*position: relative;*/
position: fixed;
top: 0;
left: 0;
/*right: 0;
bottom: 0;*/
display: flex;
}
#thecanvas{
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity:0;
}
#finalImg{
position: absolute;
top: 0;
left: 0;
z-index: 500;
opacity: 0;
display: flex;
width: 100%;
}
#content{
/*position: relative;*/
}
.content-button {
z-index: 501
}
.shu{
z-index: 101
}
.share-text{
z-index: 101
}
.lottory{
z-index: 101
}
.imgSrc{
position: absolute;top: 0;
z-index: 1000;
}
</style>
</head>
<body>
<div id="content">
<div id="view">
<img src="img/result0.png" style="width: 100%;height: 100%" class="bc">
<div class="user">
2019年 <span> 用户名 </span> 您的
</div>
</div>
<!-- <div class="imgSrc"></div> -->
<!--分享、保存 -->
<div class="share">
<img src="img/share3.png">
</div>
<div class="content-button"></div>
<!-- <div class="share-text"></div> -->
</div>
<div class="lottory">
<img src="img/start.png" style="width: 100%;z-index: 99" >
</div>
<!-- 真正的抽奖点击处 -->
<div class="real-lottory" style="z-index:501"></div>
<div class="result-mask">
<img src="img/share.png" style="width: 100%">
</div>
<img src="" id="finalImg">
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/base64.js"></script>
<script src="js/canvas2image.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript">
var height = $("#view").height() || 650;
var width = $("#view").width();
console.log(height,width)
var scale = 2;
function changeBg(callback){
var random = parseInt(Math.random()*5,10);
var sex = sessionStorage.getItem("sex");
$(".share img").attr("src","img/share"+ random + ".png")
console.log(random,sex)
if(random == 2){
if(sex == 1){
random = 5
}
}
$(".bc").attr("src","img/result"+ random + ".png")
callback()
}
$(".content-button").click(function(){
$(".result-mask").show();
})
$(".result-mask").click(function(){
$(".result-mask").hide();
})
function takeScreenshot(callback) {
var canvas = document.createElement("canvas")
canvas.setAttribute('id','thecanvas');
canvas.width = width * 2;
canvas.height = height * 2;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
var context = canvas.getContext("2d");
context.scale(2,2);
console.log('test');
html2canvas(document.getElementById('view'), {
canvas:canvas,
onrendered: function(canvas) {
document.body.appendChild(canvas);
callback()
},
});
// console.log("a完成")
}
$(".real-lottory").click(function(){
console.log("抽奖")
})
$(".save").click(function(e){
setTimeout(canvastoImg(document.getElementsByTagName("canvas")[0],'finalImg'),2000)
})
function canvastoImg(canvas,id){
// console.log(canvas,"b开始")
var image = new Image();
image.src = canvas.toDataURL("image/png");
$("#" + id).attr('src',image.src)
$(".imgSrc").text(image.src)
return image;
}
$(function(){
changeBg(function(){
setTimeout(takeScreenshot(function(){
canvastoImg(document.getElementsByTagName("canvas")[0],'finalImg')
}),2000)
})
})
</script>
</html>
如果你要使用
把动态生成的canvas和最后生成的img的opcity都设为0，绝对定位到顶端，把canvas的index设置为-1，img高于dom的index，如页面中的 style ---> #thecanvas,#finalImg
注意
- 如果你发现你本地的图片无法动态生成到canvas中，你需要把这些图片资源放到服务器中，最好不要跨域（我同事测试说不启动服务也可以，我没有测过，有兴趣可以试试）
- 发现有时候定位也会导致canvas的生成没有图片只有文字，我把定位改成fixed就能正常出现图（后来发现问题原因：可能是因为图片没有加载出来，用户名信息是absolute定位上去，图片加载慢会导致var height = $("#view").height() = 0，canvas就没有高度，最后导致不能生成要保存的图片啦）
- 想法：可以看图片长宽比与手机窗口长宽比，计算出canvas需要的高度
git
https://github.com/gyn894654492/js-html2canvas-canvas2image-dom-
网友评论