需要用到html2canvas
代码如下:
<div id="box" className={style.box}>
</div>
<div id="shareImg">
{/* 内容 */}
</div>
js:
let shareContent = document.getElementById('poster')
if (!shareContent) return
var width = shareContent.offsetWidth //获取dom 宽度
var height = shareContent.offsetHeight //获取dom 高度
var canvas = document.createElement('canvas') //创建一个canvas节点
var scale = 1 //定义任意放大倍数 支持小数
canvas.width = width * scale //定义canvas 宽度 * 缩放
canvas.height = height * scale //定义canvas高度 *缩放
canvas.style.height = height + 'px'
canvas.style.width = width + 'px'
let context = canvas.getContext('2d') //获取context,设置scale
context.scale(scale, scale)
var opts = {
allo