uniapp html2canvas生成图片

在uni-app中使用html2canvas生成图片的步骤如下：

1. 首先，在你的uni-app项目中安装html2canvas插件。可以使用以下命令进行安装：

npm install html2canvas

2. 在你的代码中引入html2canvas，并编写生成图片的方法。可以参考以下代码：

<script lang="renderjs" module="canvasImage">
import html2canvas from 'html2canvas'

export default {
  methods: {
    generateImage(e, ownerFun) {
      ownerFun.callMethod('_showLoading', '正在生成图片')

      setTimeout(() => {
        const dom = document.getElementById('pagePoster')
        html2canvas(dom, {
          width: dom.clientWidth,
          height: dom.clientHeight,
          scrollY: 0,
          scrollX: 0,
          useCORS: true,
        }).then((canvas) => {
          ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
        }).catch(err => {
          ownerFun.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
        })
      }, 300)
    }
  }
}
</script>

在上面的代码中，我们通过调用`html2canvas`函数来生成图片。需要传入一个DOM节点作为参数，这里使用`document.getElementById('pagePoster')`来获取需要生成图片的节点。生成成功后，可以通过`canvas.toDataURL('image/png')`获取图片的base64位的URL。

3. 在需要生成图片的地方调用`generateImage`方法。可以参考以下代码：

<button @click="generateImage">生成图片</button>

在上面的例子中，我们将生成图片的方法绑定在按钮的点击事件上。

通过以上步骤，你就可以在uni-app中使用html2canvas来生成图片了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [小程序 uniapp中webview内嵌H5页面 html2canvas截图 base64的图片保存到手机相册](https://blog.csdn.net/M__O__M/article/details/126985611)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uni-app 中使用 html2canvas 生成图片（支持多端）](https://blog.csdn.net/weixin_42779803/article/details/118384426)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]