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() //模拟触发