描码体验

文未有小程序源码地址 （另有偿提供后台数据接口服务）

模板代码参考

  <view class='padding text-center'>
      <image src="{{shareImage}}" mode="widthFix"></image>
      <canvasdrawer :painting.sync="painting" @getImage.user="eventGetImage"></canvasdrawer>
    </view>
  <view class="padding">
    <button wx:if="{{shareImage}}" class='cu-btn block bg-red margin-tb-sm lg' @tap="eventSave">保存分享图</button>
  </view>

部分js代码

event = {
      getImage (e) {
          wepy.showToast({
              title: e,
              icon: "success",
              duration: 2000
          });
      }
    }

  async buildPoster(){
      if(this.shareImage == ''){
        wepy.showLoading({
            title: "生成中",
            mask: true
        });
        let poster = await commApi.GetArticlePoster(this.id)
        this.painting = poster
      }
      this.showposter = true;
      this.$apply();
    }

  methods = {

   async eventSave() {
            // 保存图片至本地
            const res = await wepy.saveImageToPhotosAlbum({
                filePath: this.shareImage
            });
            if (res.errMsg === "saveImageToPhotosAlbum:ok") {
                wepy.showToast({
                    title: "分享图已保存到相册",
                    icon: "success",
                    duration: 2000
                });
            }
        },

   eventGetImage(event) {
            wepy.hideLoading();
            const { tempFilePath, errMsg } = event;
            if (errMsg === "canvasdrawer:ok"){
                this.shareImage = tempFilePath;
            }else{
                wepy.showToast({
                    title: errMsg,
                    icon: "success",
                    duration: 2000
                });
            }
        },

  }

后端php代码

public function defalutArticlePoster($app, $user, $article){
  // 
  $title_length = Str::length($article->title,'UTF-8');
  // dd($title_length);
  $poster = [
    'width'=>460,
    'height'=> 500,
    'clear'=> true,
    'views'=>[
  	[
        'type'=> 'rect',
        'background'=> '#666',
        'top'=> 0,
        'width'=> 460,
        'height'=> 500,
        'left'=> 0
      ],
      [
        'type'=> 'rect',
        'background'=> '#ffffff',
        'top'=> 2,
        'width'=> 456,
        'height'=> 496,
        'left'=> 2
      ],
      [
        'type'=> 'image',
        'url'=>  $article->cover? $article->cover:'https://wx1.wechatrank.com/base64img/20190402233111.jpeg',
        'top'=> 70,
        'left'=> 28,
        'width'=> 400,
        'height'=> 320
      ],
      [
        'type'=> 'text',
        'content'=>  $article->title,
        'fontSize'=> 18,
        'lineHeight'=> 24,
        'color'=> '#333',
        'textAlign'=> 'left',
        'top'=> $title_length>22?16:26,
        'left'=> 28,
        'width'=> 387,
        'MaxLineNumber'=> 2,
        'breakWord'=> true,
        'bolder'=> true
      ],
  	[
        'type'=> 'text',
        'content'=> str_replace(array(" ", "　", "\t", "\n", "\r", "\r\n", PHP_EOL), '', $article->intro),
        'fontSize'=> 18,
        'lineHeight'=> 24,
        'color'=> '#666',
        'textAlign'=> 'left',
        'top'=> 406,
        'left'=> 28,
        'width'=> 310,
        'MaxLineNumber'=> 3,
        'breakWord'=> true,
        'bolder'=> true
      ],
      [
        'type'=> 'image',
        'url'=> url('/qrcode/article/'.$article->qrcode),
        'top'=> 406,
        'left'=> 360,
        'width'=> 68,
        'height'=> 68
      ]
    ],
  ];
  return $poster;
}

示例代码来源：
https://github.com/yizenghui/wxcms/blob/master/src/pages/poster/index.wpy

项目地址： https://github.com/yizenghui/wxcms

https://github.com/simmzl/wepy_canvas_drawer

觉得对您有帮助请点个赞，谢谢