使用小程式畫布js程式碼如下：

1. onLoad: function (options) {

2. var that = this;

3. //1. 請求後端API生成小程式碼

4. //that.getQr();

5. //2. canvas繪製文字和圖片

6. const ctx = wx.createCanvasContext('myCanvas');

7. var imgPath = '../../../image/intro.jpg';

8. var bgImgPath = '../../../image/bgImgPath.jpg';

9. var basicprofile ='../../../image/basicprofile.png';

10. var xcxcode ="http://localhost/mining120/public/static/xcxcode/29-5.jpeg";

11. //填充背景

12. ctx.setFillStyle('#cccccc');

13. ctx.fillRect(0, 0, 240, 360);

14. ctx.setFillStyle('#ffffff');

15. ctx.fillRect(1, 1, 238, 358);

16. //繪製產品圖

17. ctx.drawImage(imgPath, 2, 2, 236, 200);

18. //繪製標題

19. ctx.setFontSize(16);

20. ctx.setFillStyle('#000000');

21. ctx.fillText('圓通刪掉貸方金額', 10, 225);

22. //繪製介紹產品

23. ctx.setFontSize(12);

24. ctx.setFillStyle('#6F6F6F');

25. ctx.fillText('寵友們快來圍觀萌寵靚照我在萌爪幼稚園', 10, 250);

26. ctx.fillText('我在萌爪幼稚園', 10, 270);

27. //繪製一條虛線

28. ctx.strokeStyle = 'blue';

29. ctx.beginPath();

30. ctx.setLineWidth(1);

31. ctx.setLineDash([2, 4]);

32. ctx.moveTo(10, 287);

33. ctx.lineTo(230, 287);

34. ctx.stroke();

35. //繪製礦業人圖示

36. ctx.drawImage(basicprofile, 10, 310, 30, 30);

37. //繪製介紹

38. ctx.setFontSize(11);

39. ctx.setFillStyle('#aaaaaa');

40. ctx.fillText('長按掃碼檢視詳情', 47, 318);

41. ctx.fillText('分享自礦業人小程式', 47, 338);

42. ctx.drawImage(xcxcode, 165, 295, 60, 60);

43. ctx.draw();

44. },

    wxml程式碼如下：

1. <canvas style="margin:0 auto;margin-bottom:30px;width: 240px; height: 360px;box-shadow:1px 2px 2px #ccc;border-raidus:1px;" canvas-id="myCanvas"></canvas>

2. <view class='ft'>儲存圖片到手機相簿，分享到朋友圈</view>

3. <view style="text-align:center;padding-bottom:20px"><button bindtap='savetup' type="primary" size='mini'>儲存到相簿</button></view>

4. </view>

儲存圖片程式碼：

1. savetup:function(){

2. var that = this;

3. wx.canvasToTempFilePath({

4. x: 0,

5. y: 0,

6. width: 240,

7. height: 360,

8. destWidth: 240,

9. destHeight: 360,

10. canvasId: 'myCanvas',

11. success: function (res) {

12. //調取小程式當中獲取圖片

13. console.log(res.tempFilePath);

14. wx.saveImageToPhotosAlbum({

15. filePath: res.tempFilePath,

16. success(res) {

17. wx.showModal({

18. title: '存圖成功',

19. content: '圖片成功儲存到相簿了，去髮圈噻~',

20. showCancel: false,

21. confirmText: '好噠',

22. confirmColor: '#72B9C3',

23. success: function (res) {

24. if (res1.confirm) {

25. console.log('使用者點選確定');

26. }

27. }

28. })

29. }

30. })

31. },

32. fail: function (res) {

33. console.log(res)

34. }

35. })