vue/uniapp H5页面截图

1.引入html2canvas

复制代码

npm install html2canvas

2.代码实现

javascript 复制代码

<template>
  <view class="container">
    <!-- 截图的目标区域，设置 id="capture-box" -->
    <view id="capture-box" class="content-box">
      123456
    </view>
  </view>
</template>
<script>
import html2canvas from "html2canvas"
export default {
    mounted(){
        const element = document.getElementById('capture-box');
        const canvas = html2canvas(element, {
              // 配置项
              useCORS: true, // 允许加载跨域图片（重要）
              scale: window.devicePixelRatio, // 提高清晰度（适配 Retina 屏幕）
              logging: false, // 关闭日志
              backgroundColor: '#ffffff', // 确保背景色正确（默认透明可能变黑）
              windowHeight: element.scrollHeight // 确保截图高度包含所有滚动内容
        });
        const base64Image = canvas.toDataURL('image/png');
    }
}

注：报错Error in mounted hook: "TypeError: canvas.toDataURL is not a function"

版本差异 ：你引入的 html2canvas 版本较旧（例如 0.5.x 版本），该版本默认返回的是 DOM <canvas> 元素对象，确实有 toDataURL 方法；但如果你使用的是 1.x 版本，默认行为可能会发生细微变化，或者在某些异步处理中变量被意外覆盖。
变量命名冲突 ：这是最常见的"低级错误"。在 Vue 的 <script> 中，你可能把接收截图结果的变量命名为 canvas，这可能会和 HTML 原生的 <canvas> 标签对象或者组件内的变量混淆，尤其是在 v-for 循环中使用了 canvas 作为 key 或 item 名字。

方案一：检查变量命名冲突

javascript 复制代码

const canvas = html2canvas(element)
const base64 = canvas.toDataURL();

改为

const myCanvas = html2canvas(element)
const base64 = myCanvas.toDataURL();

方案二：使用异步处理

javascript 复制代码

methods: {
    async handleCapture() {
        const element = document.getElementById('capture-box');
        const canvas = await html2canvas(element, {
          useCORS: true, // 允许加载跨域图片（重要）
          scale: window.devicePixelRatio, // 提高清晰度（适配 Retina 屏幕）
          logging: false, // 关闭日志
          backgroundColor: '#ffffff', // 确保背景色正确（默认透明可能变黑）
          windowHeight: element.scrollHeight // 确保截图高度包含所有滚动内容
        });
        const base64Image = canvas.toDataURL('image/png');

        console.log('截图成功', base64Image);
        
    }
}

方案三：检查变量命名冲突

有时异步处理可能导致变量丢失,可以尝试使用 .then() 调用，这是 html2canvas 最传统的写法，最稳妥：

javascript 复制代码

<template>
  <view class="container">
    <!-- 截图的目标区域，设置 id="capture-box" -->
    <view id="capture-box" class="content-box">
      123456
    </view>
  </view>
</template>
<script>
import html2canvas from "html2canvas"
export default {
    mounted(){
        const element = document.getElementById('capture-box');
        html2canvas(element, {
            // 配置项
            useCORS: true, // 允许加载跨域图片（重要）
            scale: window.devicePixelRatio, // 提高清晰度（适配 Retina 屏幕）
            logging: false, // 关闭日志
            backgroundColor: '#ffffff', // 确保背景色正确（默认透明可能变黑）
            windowHeight: element.scrollHeight // 确保截图高度包含所有滚动内容
        }).then(res=>{
            console.log(res.toDataURL('image/png'));
        })
    }
}