在 360 浏览器 使用html2canvas 截取超长页面出现空白现象, 而Chrome浏览器没有这样的现象, 如何解决

这是因为 360 浏览器的渲染机制与 Chrome 浏览器有所不同，可能导致在使用 html2canvas 时出现空白现象。

你可以尝试以下解决方案：

1. 设置 canvas 的高度为页面的高度，即 `canvas.height = document.body.scrollHeight`。这样可以确保 canvas 的高度足够容纳整个页面。

2. 将页面滚动到底部，然后再截图。这样可以确保整个页面都已经加载完毕，并且已经渲染完毕。

3. 如果以上两种方法都无法解决问题，你可以尝试使用其他截图工具，例如 Puppeteer 或 PhantomJS。这些工具可以模拟浏览器渲染页面，然后将页面截图保存为图片。

希望这些解决方案对你有所帮助。

相关问题

在原生小程序中使用 html2canvas将页面转成图片

在原生小程序中使用 html2canvas 将页面转成图片是不可行的，因为 html2canvas 是基于浏览器的 JavaScript 库，而小程序并不是基于浏览器的。在小程序中，你需要使用小程序提供的 Canvas API 来绘制图片。以下是大致的思路：

1. 将需要截图的部分用 Canvas 绘制出来。
2. 使用 Canvas 的 toTempFilePath 方法将 Canvas 转成图片。
3. 将生成的图片保存到相册或服务器。

具体实现过程可以参考以下代码示例：

// 获取 Canvas 绘制上下文
const ctx = wx.createCanvasContext('myCanvas')

// 绘制需要截图的部分
ctx.drawImage('image', x, y, width, height, 0, 0, width, height)

// 将 Canvas 转成图片
ctx.draw(false, () => {
  wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success(res) {
      // 将生成的图片保存到相册或服务器
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success() {
          wx.showToast({
            title: '保存成功'
          })
        },
        fail() {
          wx.showToast({
            title: '保存失败'
          })
        }
      })
    },
    fail() {
      wx.showToast({
        title: '生成图片失败'
      })
    }
  })
})

vue html2canvas 截取div

你可以使用html2canvas库来截取Vue组件中的div。以下是一个简单的例子：

首先，安装html2canvas库：

npm install html2canvas --save

然后，在需要截图的Vue组件中引入html2canvas库：

import html2canvas from 'html2canvas';

接下来，在需要截图的方法中，使用html2canvas截取div：

methods: {
  capture() {
    const div = document.getElementById('capture');
    html2canvas(div).then(canvas => {
      document.body.appendChild(canvas);
    });
  }
}

在上面的代码中，我们使用getElementById方法获取需要截图的div，然后使用html2canvas方法截取该div。最后，将截取的结果添加到body中。

请注意，上面的代码只是一个简单的例子，你需要根据你的具体需求进行修改。