uniapp如何将html转成图片

1. 介绍

在一些场景下，我们可能需要将html页面转成图片，比如在社交网络上分享网页截图、在微信小程序中生成图文分享卡片等等。uniapp是一款跨平台的开发框架，其提供了一种方便的方法来将html页面转化为图片，同时也兼容多个平台，如H5、微信小程序、App、支付宝小程序等。在本篇文章中，我们将会介绍uniapp如何将html转成图片。

2. 安装依赖

首先，我们需要安装相关依赖，包括html2canvas和canvas2image：

npm install html2canvas canvas2image --save

3. 增加配置

我们需要在`uni.scss`文件中增加以下配置：

@import "~uni-app/html2canvas/dist/html2canvas";
@import "~uni-app/canvas2image/canvas2image";
uni-page {
    position: relative;
}
.uni {
  canvas {
    position: absolute !important;
    left: 0px !important;
    top: 0px !important;
    z-index: -1 !important;
  }
}

这些配置的作用：浮动在Content之下，并且内容不会溢出画布。

4. 使用html2canvas转换

既然我们已经安装依赖和配置了样式，那么现在就可以开始使用html2canvas进行转换了。下面是一个简单的例子：

<template>
  <view class="uni">
    <div id="capture" style="background-color:white;">
        <h1>Hello world!</h1>
        这是一个简单的示例.
    </div>
  </view>
</template>
<script>
import html2canvas from '@/uni_modules/html2canvas/dist/html2canvas.min.js';
import Canvas2Image from '@/uni_modules/canvas2image/canvas2image.js';
export default {
  methods: {
    // convert the html into image
    async convertToImage() {
      const dom = document.querySelector('#capture');
      html2canvas(dom).then(canvas => {
        document.body.appendChild(canvas);
        const base64Url = canvas.toDataURL('image/png');
        console.log(base64Url);
        Canvas2Image.saveAsPNG(canvas);
      });
    },
  },
};
</script>

在html中，我们定义了一个包含`h1`和一个简单段落的`div`元素。在script标签里，我们import了`html2canvas`和`canvas2image`的依赖，在`convertToImage`方法中，我们使用`html2canvas`函数来转换`div`元素。我们从Document里面获取该元素，然后将其传递给`html2canvas`函数。该函数会返回一个canvas画布，画布可以放置在任何地方。在本例中，我们将其附加在body元素上。

最后，我们将Canvas转换为图片并保存。

5. 总结

通过使用html2canvas和canvas2image，我们可以将html页面轻松地转换成图片。这种技术可以用于很多场景，如社交网络分享、微信小程序分享等。虽然这里只展示了一个简单的例子，但是，通过html2canvas，我们可以处理复杂的html页面，并将其转换为图像。