在uniapp 微信小程序 怎么把页面转换成图片啊

Question

在uniapp 微信小程序 怎么把页面转换成图片啊？ 要把特定的内容转换 例如把页面内的表格转换成一张图片。 我找了一下官方的要直接用canvas画出来那真的是要命啊。。

Answer 1

在uniapp中，可以使用第三方库html2canvas和canvg将页面内容转换为图片，具体步骤如下：

安装html2canvas和canvg

npm install html2canvas canvg --save
导入html2canvas和canvg

在需要进行页面截图的页面中，导入html2canvas和canvg模块：

import html2canvas from 'html2canvas';

import canvg from 'canvg';

获取需要截图的HTMLElement元素
将需要进行截图的HTML元素定义一个ref属性，并在mounted钩子函数中获取该元素。
例如，在以下示例中，我们定义了一个包含表格的div元素，并且定义了一个id为“capture”的ref属性以便获取该元素：

<template>
  <div>
    <div ref="capture">
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
    <button @click="capture">截图</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.element = this.$refs.capture;
    });
  },
  methods: {
    capture() {
      // 截图代码
    }
  }
}
</script>

使用html2canvas将HTMLElement元素转换为canvas
在获取到HTMLElement元素后，可以使用html2canvas函数将其转换为canvas。在转换过程中，可以指定一些选项，例如宽度、高度、背景色等。

例如，在以下示例中，我们通过html2canvas函数将元素转换为canvas，并将其插入到body元素中：

methods: {
  async capture() {
    const canvas = await html2canvas(this.element, {
      useCORS: true // 需要跨域时添加此选项
    });
    
    document.body.appendChild(canvas);
  }
}

使用canvg将canvas转换为图片
在将HTMLElement元素转换为canvas后，可以使用canvg函数将canvas转换为图片对象。然后可以根据需要对图片进行保存、上传等操作。

例如，在以下示例中，我们通过canvg函数将canvas转换为图片对象，并将其保存为PNG格式的文件：

methods: {
  async capture() {
    const canvas = await html2canvas(this.element, {
      useCORS: true // 需要跨域时添加此选项
    });
    
    const imgData = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'capture.png';
    link.href = imgData;
    link.click();
  }
}