代碼例子 

今天在百般的無(wú)聊中，去看了看小程序的api文檔，抱著學(xué)習(xí)，增加點(diǎn)知識(shí)的態(tài)度下，又是很認(rèn)真的看了一邊各個(gè)api的說(shuō)明和使用例子，看著看著就萌發(fā)了怎么一個(gè)想法，記得以前在H5時(shí)代的時(shí)候，要實(shí)現(xiàn)圖片和文字結(jié)合，合成一張新的圖片，這個(gè)得借助后臺(tái)的能力，但今天我看小程序的api可以完全不借助后臺(tái)的節(jié)奏，都能很好的完成怎么一個(gè)功能。

頁(yè)面效果例子

這個(gè)小程序后續(xù)有機(jī)會(huì)，會(huì)跟大家見面，下面不多說(shuō)直接上碼：

1. <!--wxml部分-->
2. <view class="">
3. <view class="canvasStyle">
4. <canvas canvas-id="myCanvas" bindtouchstart="start"
5. bindtouchmove="move"/>
6. <view class="Canvas_Text"><image src="{{imageUrl}}"></image></view>
7. //這里是為了解決文字拖動(dòng)時(shí)會(huì)有白光閃現(xiàn)
8. </view>
9. <view class="chooseImage">
10. <view class="Btn BtnImg_select" bindtap="chooseImageFun">先選擇圖片</view>
11. <view class="Input_text">
12. <input placeholder="請(qǐng)輸入裝逼內(nèi)容" bindinput="InputFuns" />
13. </view>
14. <view wx:if="{{showst}}" class="Btn generateBtn" bindtap="Okgenerate">
15. 生成，并保存
16. <view>(當(dāng)你點(diǎn)擊生成的那一刻，恭喜你裝逼生涯就此開始了)</view>
17. </view>
18. <view wx:if="{{!showst}}" class="Btn generateBtn grayBtn">
19. 生成，并保存
20. <view>(當(dāng)你點(diǎn)擊生成的那一刻，恭喜你裝逼生涯就此開始了)</view>
21. </view>
22. </view>
23. </view>

1. const app = getApp()
2. const ctx = wx.createCanvasContext('myCanvas')
3. Page({
4. data: {
5. text_x: 20, //x軸
6. text_y:20, //y軸
7. imageUrl: '', // 生成的圖片路徑
8. showst:false, //是否完成圖片和文字的填入
9. sytext: '', //文本
10. },
11. chooseImageFun(){ //選擇圖片
12. var _this = this
13. wx.chooseImage({
14. success: function (res) {
15. console.log(res)
16. _this.setData({
17. imageUrl: res.tempFilePaths[0]
18. })
19. ctx.drawImage(res.tempFilePaths[0], 6, 0, 189, 310)
20. ctx.draw()
21. }
22. })
23. },
24. InputFuns(e){ //文字
25. this.setData({
26. sytext: e.detail.value
27. })
28. ctx.setFontSize(14)
29. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)
30. ctx.draw(true)
31. this.setData({
32. showst:true
33. })
34. },
35. start(e){ // 手指開始接觸移動(dòng)
36. console.log(e)
37. this.setData({
38. text_x: e.touches[0].x,
39. text_y: e.touches[0].y
40. })
41. ctx.clearRect(0, 0, 200, 310)
42. ctx.draw()
43. ctx.drawImage(this.data.imageUrl, 6, 0, 189, 310) //重新畫上
44. ctx.setFontSize(14)//重新畫上字體大小
45. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)//重新畫上
46. ctx.draw(true) //重新畫上
47. },
48. move(e) { // 手指在移動(dòng)
49. console.log(e)
50. this.setData({
51. text_x: e.touches[0].x,
52. text_y: e.touches[0].y
53. })
54. ctx.clearRect(0, 0, 200, 310) //清除畫布上的內(nèi)容
55. ctx.draw()
56. ctx.drawImage(this.data.imageUrl, 6, 0, 189, 310) //重新畫上
57. ctx.setFontSize(14) //重新畫上字體大小
58. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)//重新畫上
59. ctx.draw(true)//重新畫上
60. },
61. Okgenerate(){ //生成圖片方法
62. var _this = this
63. this.setData({
64. showst: false
65. })
66. wx.canvasToTempFilePath({ //生成圖片
67. x: 0,
68. y: 0,
69. width: 200,
70. h