前端使用html2canvas，生成海报并下载图片

html2canvas插件官网
有点铁打弊端，只能截图可视的部分，你可以缩小截图官网的实例，截图后再全屏浏览器，你会发现也是只截了一部分。然后网上各种方法，什么滚动回到顶，复制节点，scale。。。。我是看了很多连续花了五个小时没实现。

所以最后方案是：

• 小图在pc端可以搞。大图（大于可视窗口）不行，得让后端合成（后端难点在于文字合成）
• 小程序无视第一条，可以前端搞，但是难度高得多
• 小图pc端用html2canvas截图，有一定兼容问题，用插件就有问题
• 使用：

 html2canvas(document.querySelector("#capture")).then(canvas => {
    
    
    document.body.appendChild(canvas)
});

这是官方的用法，一般你会用div套住好几个img（这几个img合成一个海报），你给div设置id=“capture”。如果你这些img都是根据后端请求来的，那么会有跨域问题（可能并不会报错出来）。
你需要

html2canvas(document.querySelector("#capture"),{
    
    useCORS:true}).then()

document.body.appendChild(canvas)是给页面多加一个dom元素，该元素就是海报了。
想要下载的话
//这段内容放在上面函数体里面的

let imgurl= canvas.toDataURL('image/png')    //或者jpeg,听说jpeg性能更好，
let a=document.createElement('a')         //新建a标签
a.href=imgurl                             //修改属性，url是一段base64
a.download='这是图片名字.png'
a.click()                                //模拟触发

成品