js如何处理如下的事务

Question

Answer 1

刚好昨天也帮人解决了个类似的截图的问题，给你写个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'
          }
        })
      })
    }

Answer 2

根据后端返回的信息使用canvas绘制图片并下载

Answer 3

之前写过类似的，你可以参考下（访问的时候加个时间戳，或者强制刷新一下）：http://bestime.vaiwan.com/too...

拿到图片后用canvas按照图二布局绘制一张图，然后oCanvas.toDataURL("image/jpeg")到a标签的url模拟click进行下载