前端生成分享海报的几种方法

1，使用painter插件

   适用于微信小程序及uniapp的小程序端

①，引入插件painter

   克隆地址：https://gitcode.net/mirrors/Kujiale-Mobile/Painter

   下载的painter放到微信小程序的components目录下

②在json文件中引入

"usingComponents": {

        "painter":"/components/painter/painter"

},

注：在uniapp生成小程序中，painter插件需要放在wxcomponents目录下

③wxml文件中引入painter

<painter palette="{{paletteInfo.data}}" 

bind:imgOK="shareImageOkAction" 

bind:imgErr="shareImageErrAction"

 widthPixels="1080" />

④  创建 paletteInfo 数据

let textLeftCss = {
         fontSize: '28rpx',
         height: `66rpx`,
}

let views = []
views.push({
        id: "imgBg",
        type: "image",
        url: this.finalPic,
        css: {
                top: 0,
                width: '750rpx',
                mode: 'widthFix',
                }
         }, {
         id: "rectBG",
         type: "rect",
         css: [{
                width: "718rpx",
                 height: `${this.guigeList.length * 80 + this.stepList.length * 262 + 24}rpx`,
                  top: `658rpx`,
                 left: "16rpx",
                 color: 'linear-gradient(-180deg, #E7F3FF 0%,  #FFFFFF 50%)',
                shadow: '0rpx 4rpx 16rpx #F4F4F4',
                borderRadius: '16rpx'
          },textLeftCss ]
})

let paletteInfo = {
          width: "${width}px",
          height: `${height}px`,
          background: "#fff",
          views: views
 }

this.painterInfo = {
        height: height,
        data: paletteInfo
  }

⑤ 图片生成成功/失败的回调

shareImageOkAction(e) {

    console.log('生成图片路径: ', e.detail.path)

  },

shareImageErrAction(err) {

    console.log('图片生成失败: ', err)

  },

海报生成后，可以调用微信的wx.saveImageToPhotosAlbum和wx.showShareImageMenu来保存图片或者分享给好友，

2. 使用 snapshot 组件（适用于微信小程序原生开发）

1. 使用 wxml 绘制海报内容

2. 使用 snapshot 组件包裹海报的 wxml

3. 调用 takeSnapshot 获取图片数据

4. 调用 fs.writeFileSync 将海报数据写入本地文件

5. 调用 wx.saveImageToPhotosAlbum 将海报保存到本地 

  参考链接小程序生成海报，全新组件一个就好通过 Skyline snapshot 新组件，小程序快速生成海报，营销活动新法宝！https://mp.weixin.qq.com/s/GOzwCBpnzn51R-TBDbf2Ag?poc_token=HAN3YGWjr8BT5Tqo2z2vSJGlK7DnqITgJF_TJS73

 3，使用  htmltocanvas 插件（适用HTML）

 ①，获取需要生成海报的dom元素

const dom = document.getElementById('canvas')

②生成海报链接

htmltocanvas(dom, {
                      width: dom.clientWidth,   //dom 原始宽度
                      height: dom.clientHeight,
                      scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                      scrollX: 0,
                      useCORS: true, //支持跨域
                      // scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
                    }).then((canvas) => {
                        console.log(canvas.toDataURL('image/png'));

                         this.this.h5canvasImgPath = canvas.toDataURL('image/png');
                    }).catch(err=>{
                        uni.hideLoading();
                        // console.log('失败',err);
                    })

③保存图片

                var arr = this.h5canvasImgPath.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
                  while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                  }
                  // 将Blob对象转换成文件并下载到本地
                  var blob = new Blob([u8arr], {
                    type: mime
                  });
                  var a = document.createElement('a');
                  a.download = '海报.png';
                  a.href = URL.createObjectURL(blob);
                  a.click();