###
刚好昨天也帮人解决了个类似的截图的问题,给你写个demo吧
demo地址
使用插件:
axios
html2canvas
实现思路:
先把小图信息请求回来,然后渲染到预先写好的图二的dom里,在通过html2canvas
来进行截图
- 第一步:
绘制图二并处理为隐藏
<div id="imgwrap">
<div class="top">xxxxxxxx</div>
<div class="bottom">
<div class="left">xxxxxxxxxx</div>
<div class="right">
![]()
</div>
</div>
</div>
//核心css
z-index: -999;
color: #fff;
top: 0;
display: none;
- 第二步:
使用html2canvas
进行截图
function loadImg() {
axios({
method: 'get',
url: 'https://gitee.com/Wzhichao/img/raw/master/uPic/h37Qjt18%20.jpg',
responseType: 'blob'
}).then(response => {
const url = URL.createObjectURL(response.data)
document.getElementById('img').src = url
document.getElementById('imgwrap').style.display = 'block'
html2canvas(document.getElementById('imgwrap'), {
useCORS: true,
onrendered: canvas => {
const link = document.createElement('a')
link.href = canvas.toDataURL() // 下载链接
link.setAttribute(
'download',
`${new Date().toLocaleString()}.png`
)
link.style.display = 'none' // a标签隐藏
document.body.appendChild(link)
link.click() // 点击下载
document.body.removeChild(link) // 移除a标签
document.getElementById('imgwrap').style.display = 'none'
}
})
})
}
###根据后端返回的信息使用canvas绘制图片并下载
###之前写过类似的,你可以参考下(访问的时候加个时间戳,或者强制刷新一下):http://bestime.vaiwan.com/too...
拿到图片后用canvas
按照图二布局绘制一张图,然后oCanvas.toDataURL("image/jpeg")
到a
标签的url
模拟click
进行下载