小程序海报生成工具--Painter(原生及taro)

github地址 : github.com/Kujiale-Mob…

基于原生写法时：

复制git地址例子中的components文件到自己项目下，直接引用；具体代码如下

index.wxml

<view class="container">
  <view class="box">
      <painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />
      <image mode="widthFix" src="{{image}}" bindtap="previewImg" />
      <view class="save" hover-class="hoverClick" bindtap="getSave">保存图片</view>
  </view>
</view>

index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    template: {},
    image: "",
    width: 750,
    height: 1200,

  },

  onLoad() {
    this.getDraw()
  },

  getDraw() {
    wx.showLoading({
      title: '正在努力生成中',
    })
    this.setData({
      template: {
        "width": "720px",
        "height": "1280px",
        "background": "#f8f8f8",
        "views": [
          {
            "type": "image",
            "url": "http://img1.maka.im/user/8982892/images/1c20d674cd6762877bc150a4850cc381.png",
            "css": {
              "width": "720px",
              "height": "1280px",
              "top": "0px",
              "left": "0px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "image",
            "url": "http://img1.maka.im/user/8982892/images/ebaecded1e3d015a3178aa790d8a45be.png",
            "css": {
              "width": "254px",
              "height": "308px",
              "top": "192px",
              "left": "230px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "text",
            "text": "努力做一个善良的人，做一个心态阳光的人，做一个积极向上的人，用正能量激发自己",
            "css": {
              "color": "#000000",
              "background": "",
              "width": "475px",
              "height": "75.02px",
              "top": "604px",
              "left": "119px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "20px",
              "fontWeight": "normal",
              "maxLines": "2",
              "lineHeight": "37.74px",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "center"
            }
          },
          {
            "type": "text",
            "text": "微笑开始新的一天",
            "css": {
              "color": "#000000",
              "background": "",
              "width": "600px",
              "height": "58.68px",
              "top": "698px",
              "left": "60px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "36px",
              "fontWeight": "normal",
              "maxLines": "2",
              "lineHeight": "59.94px",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "center"
            }
          },
          {
            "type": "image",
            "url": "http://img1.maka.im/user/8982892/images/5ba0d49561a0e6be54b832bedb061320.jpg",
            "css": {
              "width": "127px",
              "height": "127px",
              "top": "1047px",
              "left": "532px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "mode": "scaleToFill"
            }
          }
        ]
      }
    })
  },
  // 生成成功
  canvasSuc(e) {
    console.log(e)
    wx.hideLoading()
    this.setData({
      image: e.detail.path
    })
  },
  
   getSave() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.image,
      success: (res) => {
        wx.showToast({
          title: '保存成功',
        });
      }
    })
    wx.getSetting({
      success: (set) => {
        if (set.authSetting['scope.writePhotosAlbum'] == false) {
          wx.openSetting()
        }
      }
    })
  },

  previewImg() {
    wx.previewImage({
      current: this.data.image,
      urls: [this.data.image]
    })
  },
})

index.json

{
  "usingComponents": {
    "painter": "/components/painter/painter"
  }
}

目录及成品

辅助工具

可视化ui海报生成工具

基于taro2.x(3.x暂时用不起来)

2.x版本taor已经内置，见github详细说明：https://github.com/Kujiale-Mobile/Taro-Painter-Demo