完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>富文本测试</title>
<!--<script type="text/javascript" src="https://cdn.staticfile.org/html2canvas/0.4.0/html2canvas.js"></script>-->
<!-- <script type="text/javascript" src="/static/html2canvas.js"></script>-->
<script type="text/javascript" src="/static/html2canvas1.4.1.js"></script>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0,
user-scalable=yes”/>
</head>
<style>
p {
margin: 0px;
}
h2 {
color: #333333;
font-size: 40px;
line-height: 80px;
margin: 0px;
}
h3 {
color: #333333;
font-size: 35px;
line-height: 70px;
margin: 0px;
}
.bill_content {
border: 1px solid;
border-color: #E8E5DC;
color: #333333;
font-size: 30px;
padding-left: 32px;
padding-right: 32px;
line-height: 60px;
margin: 0px;
}
</style>
<body>
<div style="position: fixed;background: #ffffff; width: 100%;height: 100%;">
</div>
<div id="view"
style="background:#FFFCF5 100%; width: 750px; padding: 32px; margin:50px auto; ">
<div class="bill_content">
<div style="height: 60px"></div>
<h2>富文本测试</h2>
<br>
<p align="center">
<span style="color:#E53333;">营销失败的四个原因</span>：
</p>
<p>
<br />
</p>
<p>
1、定位不对（飞鹤投了3000w毫无效果，就是定位不对的问题，飞鹤全产业链呵护宝宝的营养与健康，）
</p>
<p>
2、没有打透（投放没有击穿血脑屏障。现在消费者一天看上100条，一月3000条新闻，你也就记住几条好奇心浓度高的的刷屏信息，<strong>因为这些信息能越过血脑屏障阈值，进入消费者心智。越不过阈值，只能碎一地，只有极少数能越过阈值。所以浓度不够，打不透就白消耗了。所以你打不透就不要全国去大</strong>，你想办法找到一个地方精准打，例如先针对终端周边打，然后到终端去换量，广告打终端连锁名，终端连锁马上会给你安排排货优先，精准打透，超越消费血脑屏障）
</p>
<p>
3、<span style="color:#99BB00;">恶评如潮</span>（网上信息负面太多，无论是产品和品牌，无论是搜索和电商，一定要管理好用户评价。或者说要让产品能力给广告能力适配。不能广告势能很高，用户一查，全是差评）
</p>
<p>
<span style="color:#009900;">4、流量收割不行（</span>线下铺货不足，货架排面不够，还经常在货架底部，缺乏地推，经销商不给力）
</p>
<p>
<br />
</p>
<h3>
<strong>要做好营销必须要具备三大条件：</strong>
</h3>
<p>
<strong>1、品牌引爆</strong>
</p>
<p>
<em>2、社交种草</em>
</p>
<p>
<u>3、流量收割。</u>
</p> <div style="height: 30px"></div>
</div>
</div>
<img style="display: none" id="item"/>
<input type="hidden" name="company_id" id="company_id" value="2">
<input type="hidden" name="wenku_id" id="wenku_id" value="3794">
<script src="/static/sign_wall_files/js/jquery.min.js"></script>
<!--小程序页面的js-->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!--小程序页面的js-->
<script type="text/javascript">
taskScreenshort();
function taskScreenshort() {
const width = document.getElementById("view").offsetWidth;
const height = document.getElementById("view").offsetHeight;
let scale = 1; // 设定倍数这样不会模糊
html2canvas(document.getElementById("view"), {
allowTaint: true,//允许被污染
width: width,
heigth: height,
windowHeight: height,
windowWidth: width,
scale: scale,
scrollX: 0,
scrollY: 0,
y: 0,
useCORS: true,
}).then(canvas => {
//赋值
// dataUrl = canvas.toDataURL();
dataUrl = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64
//给小程序页面赋值
wx.miniProgram.postMessage({
data: {
imgData: dataUrl // 刚才拿到的base64 数据
}
});
//赋值
document.getElementById("item").setAttribute('src', canvas.toDataURL());
})
}
</script>
</body>
</html>
注意
此处代码可设定生成图片的倍数
const width = document.getElementById("view").offsetWidth;
const height = document.getElementById("view").offsetHeight;
let scale = 1; // 设定倍数这样不会模糊
设置为jpeg的图片类型，图片不会太大
dataUrl = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64
转载：https://blog.csdn.net/guo_qiangqiang/article/details/128543966
查看评论