Github address: github.com/Kujiale-Mob…

When written in native form:

Copy the components file from git address to your own project and reference it directly. The specific code is as followsCopy the code

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 </view> </view> </view> </view>Copy the code

index.js

Const app = getApp() Page({data: {template: {}, image: "", width: 750, height: 0) const app = getApp() Page({data: {template: {}, image:" 1200,}, onLoad() {this.getdraw ()}, getDraw() {wx.showloading ({title: 'working on ',}) 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": {"color": "#000000", "background": "", "width": "475px", "height": {"color": "#000000", "background": "width": "475px", "height": "75.02 px", "top" : "604 px", "left" : "119 px" and "rotate" : "0" and "borderRadius" : ""," borderWidth ":" ", "borderColor" : "#000000", "shadow": "", "padding": "0px", "fontSize": "20px", "fontWeight": "normal", "maxLines": "2", "lineHeight": "37.74 px", "textStyle" : "fill", "textDecoration" : "none", "fontFamily" : ""," textAlign ":" center "}}, {" type ": "Text", "text", "a smile to start a day", "CSS" : {" color ":" # 000000 ", "background" : ""," width ":" 600 px ", "height" : "58.68 px", "top" : "698 px", "left" : "60 px" and "rotate" : "0" and "borderRadius" : ""," borderWidth ":" ", "borderColor" : "#000000", "shadow": "", "padding": "0px", "fontSize": "36px", "fontWeight": "normal", "maxLines": "2", "lineHeight": "59.94 px", "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: 'save successfully ',}); } }) wx.getSetting({ success: (set) => { if (set.authSetting['scope.writePhotosAlbum'] == false) { wx.openSetting() } } }) }, previewImg() { wx.previewImage({ current: this.data.image, urls: [this.data.image] }) }, })Copy the code

index.json

{
  "usingComponents": {
    "painter": "/components/painter/painter"
  }
}
Copy the code

Catalogue and Finished Products

Auxiliary tool

Visual UI poster generation tool

Based on taro2.x(3.x temporarily unavailable)

2. X version taor has built-in, see lot details: https://github.com/Kujiale-Mobile/Taro-Painter-DemoCopy the code