第一步：

下載包，并將painter包放在components目錄下

?https://github.com/Kujiale-Mobile/Painter

第二步：

使用頁面的json文件中引入

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

第三步：

使用頁面的wxml

接收海報的圖片容器 <image mode="widthFix" src="{{ posterImg }}" id="goods_qr-code" alt /><painter wx-if="{{showPainter}}" palette="{{data}}" bind:imgOK="firstImg" />palette 字段作為畫圖數據的數據源, 圖案數據以 json 形式存在 widthPixels 強制指定生成的圖片的像素寬度繪圖完成后，可以通過綁定 imgOK 或 imgErr 事件來獲得成功后的圖片或失敗的原因

第四步：

使用頁面的js

生成海報的方法(){ this.setData({template: {width: "750rpx",height: "1500rpx",views: [{type: 'image',url: 圖片路路徑,css: {top: '10rpx',left: '10rpx',right: '10rpx',width: '730rpx',height: '1500rpx'}}]}}) }海報生成完畢自動調用firstImg(e) {console.log(e.detail.path);this.setData({posterImg: e.detail.path})},

插件介紹及官網：

Painter生成海報

?

?

?

?

總結

以上是生活随笔為你收集整理的【微信小程序】小程序原生代码生成海报的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。