H5 - 小程序Canvas海报小记

参考文献：github-海报
小程序在wepy框架上搭建

1、在生成海报的按钮结构中引入poster：

结构：

<poster id="poster" :config.sync="posterConfig"   >
  <view class="form-box img-box">
    <image mode="widthFix" src="/images/icon-button-after.png" class="imgs">image>
  <view>
poster>

2、js中引入poster组件，并进行相关参数的配置

ps: 这只是在本地进行配置

// 组件
import poster from '../../components/poster/poster';

export default class Index extends wepy.page {
  config = {
    navigationBarTitleText: '水晶魔幻宫廷',
    enablePullDownRefresh:true
  }
  components = {
    poster : poster
  }
  // 海报参数配置，rpx单位换算，px要乘以2
  data = {
    posterConfig: {
      // 配置海报默认参数，
      width: 1500,
      height: 3370,
      backgroundColor: '#ffffff',
      debug: false,
      //图片和文字参数配置：
      images: [
      	// 左人物图
        {
          width: 700,
          height: 710,
          x: 115,
          y: 634,
          url: "/images/icon-ceshi.png"
        },
        // 右人物图
        {
          width: 470,
          height: 476,
          x: 920,
          y: 870,
          url: "/images/icon-ceshi.png"
        },
        // 二维码
        {
          width: 340,
          height: 340,
          x: 115,
          y: 2990,
          url: "/images/icon-code.png"
        },
        // 星星
        {
          width: 54,
          height: 54,
          x: 1135,
          y: 770,
          url: "/images/icon-xing.png",
          zIndex: 4
        },
        // 背景底图
        {
          width: 1500,
          height: 3370,
          x: 0,
          y: 0,
          url: "/images/icon-recur-bg.png",
          zIndex: 3
        },
      ],
      // 文字：
      texts: [
        // 百分比
        {
          x: 900,
          y: 670,
          text: '99',
          fontSize: '144',
          color: 'white',
          opacity: 1,
          baseLine: 'middle',
          zIndex: 5
        },
        {
          // 百分比的投影
          x: 910,
          y: 685,
          text: '99',
          fontSize: '144',
          color: '#51518c',
          opacity: 1,
          baseLine: 'middle',
          zIndex: 4
        },
        // 百分比
        {
          x: 526,
          y: 3100,
          text: '乾隆皇帝',
          fontSize: '72',
          color: 'white',
          opacity: 1,
          baseLine: 'middle',
          zIndex: 4
        },
        // 文字介绍
        {
          x: 150,
          y: 1740,
          text: '【紫水晶】: 灵性水晶发，晶族中最极品的水晶，是发晶之王，是公司行号决策者最佳佩带的天然力量宝石。可增加能量聚集，象征尊贵、权力与财富，招偏财亦聚正财。',
          fontSize: '60',
          color: 'white',
          opacity: 1,
          width: 1180,
          lineNum: 4,      // 四行省略显示
          lineHeight: 90,
          marginLeft: 0,
          baseLine: 'middle',
          zIndex: 4
        },
        {
          x: 150,
          y: 2370,
          text: '【你的性格和乾隆皇帝最匹配】: 福人自有福命。很多人都觉得贤惠的女人在后宫注定是宫斗的牺牲品，可不要小看了贤惠的力量，它有着水滴石穿的能力，如果用得当，可以使自己拥有独有的人缘与魅力。',
          fontSize: '60',
          color: 'white'
          opacity: 1,
          width: 1180,
          lineNum: 5,
          lineHeight: 90,
          marginLeft: 0,
          baseLine: 'middle',
          zIndex: 4
        },
      ]
    }
  }
  // ---- end ----
  // 配置poster
  events = {
    'onPosterSuccess': (imageUrl,  $event) => {
      if(imageUrl) {
      // 链接到保存海报的页面地址
        var url = '/pages/poater/poater?imgUrl=' + imageUrl
        wx.navigateTo({
          url : url
        });
        
        // 第二种方法： 本地生成一个画布看效果
        wx.previewImage({
          current: imageUrl,
          urls: [imageUrl]
        })
        
      }
    },
    'onPosterFail': (err,  $event) => {
      console.log(err);
    }
    
  }
  // ---- end ----
}

3、pages保存海报的页面

<template>
<view class="g-poster-list">
    <view class='item-hd'>
        
       <image class='imgs' src="{{imgUrl}}"  mode="widthFix" >image>
    view>
    <view class='f-poster-box' @tap='saveImage' data-img='{{imgUrl}}'>
        <image mode="widthFix" src="/images/icon-recur-bg2.png" class="imgs">image>
        <view class="img-box">
            <image mode="widthFix" src="/images/icon-button-lg.png" class="imgs">image>
        view>
    view>
view>
template>

js：

  import wepy from 'wepy';
  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: '水晶魔幻宫廷'
    }
    data = {
      imgUrl:""
    }
    onLoad(option) {
      var that = this
      this.imgUrl = option.imgUrl
    }
    methods = {
    // 保存图片
    	saveImage(e) {
    	  var img = e.currentTarget.dataset.img
    	  img && wx.saveImageToPhotosAlbum({
    	    filePath: img,
    	    success : function() {
    	      wx.showToast({
    	        title: '保存图片成功',
    	        icon: 'success',
    	        duration: 2000
    	      })
    	    }
    	  })
    	}
    }
    // ---- end ----
  }

效果：