uniapp分享工作中用到的一个海报插件

前不久工作中遇到一个需求，要把页面的一部分（一张图片，一个二维码，一些文字）能变成图片保存到用户的手机上。初次接触这个需求，我的想法是得找个办法把页面dom元素转换成canvas图片然后保存，顺着这个思路研究了一上午，发现不好做，网上搜不到特别靠谱的办法。苦思冥想时突然回想了以前学习uniapp时老师提过一嘴的海报插件，于是上插件市场看了下，发现这就是完美符合我需求的东西，既然没法把dom转换成图片，那就自己画一个海报不就行了。后来需求也是完美的实现了，这里分享一下插件用法。

先上链接海报画板 - DCloud 插件市场。

这个插件可以帮助我们用html+css的语法来绘制一个海报，海报可以保存到用户的手机相册里，非常好用。

用法也很简单，下面简单的贴一下代码，更加详细的用法可以点击上面的链接进入到插件详情查看：

<l-painter
  isCanvasToTempFilePath
  @success="handleDrawPainterSuccess"
  hidden
  css="width: 750rpx; padding: 48rpx;"
>
  <!-- 绘制二维码 -->
  <l-painter-qrcode
    css="width: 160rpx; height: 160rpx; margin-right: 42rpx;"
    text="www.baidu.com"
  >
  <!-- 绘制文字 -->
  </l-painter-qrcode>
  <l-painter-text
    text="hello world"
    css="color: #333; font-size: 20rpx"
  />
</l-painter>
 
 
 // 海报绘制成功后保存到用户手机
 const handleDrawPainterSuccess = (e) => {
    showLoading()
    uni.saveImageToPhotosAlbum({
        filePath: e, //图片文件路径
        success: function () {
            uni.showToast({
                title: '图片保存成功',
                icon: 'none',
            })
        },
        fail: function (e) {
            uni.showToast({
                title: '图片保存失败',
                icon: 'none',
            })
        },
        complete: () => {
            
        },
    })
}