index.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. import Wxml2Canvas from '../../src/index';
  2. Page({
  3. data: {
  4. imgs: []
  5. },
  6. onLoad (res) {
  7. this.drawImage1();
  8. setTimeout(() => {
  9. this.drawImage2();
  10. }, 300);
  11. setTimeout(() => {
  12. this.drawImage3();
  13. }, 600)
  14. setTimeout(() => {
  15. this.drawImage4();
  16. }, 900)
  17. setTimeout(() => {
  18. this.drawImage5();
  19. }, 1200)
  20. setTimeout(() => {
  21. this.drawImage6();
  22. }, 1500)
  23. },
  24. saveImage (evt) {
  25. let index = evt.target.dataset.index;
  26. wx.saveImageToPhotosAlbum({
  27. filePath: this.data.imgs[index],
  28. success(res) {
  29. wx.showToast({
  30. title: '保存成功',
  31. icon: 'success'
  32. })
  33. },
  34. fail () {
  35. wx.showToast({
  36. title: '保存失败',
  37. icon: 'none'
  38. })
  39. }
  40. })
  41. },
  42. drawImage1 () {
  43. let self = this;
  44. this.drawImage1 = new Wxml2Canvas({
  45. width: 340,
  46. height: 210,
  47. element: 'canvas1',
  48. background: '#f0f0f0',
  49. progress (percent) {
  50. },
  51. finish(url) {
  52. let imgs = self.data.imgs;
  53. imgs.push(url);
  54. self.setData({
  55. imgs
  56. })
  57. },
  58. error (res) {
  59. }
  60. });
  61. let data = {
  62. list: [{
  63. type: 'wxml',
  64. class: '.share__canvas1 .draw_canvas',
  65. limit: '.share__canvas1',
  66. x: 0,
  67. y: 0
  68. }]
  69. }
  70. this.drawImage1.draw(data);
  71. },
  72. drawImage2 () {
  73. let self = this;
  74. this.drawImage2 = new Wxml2Canvas({
  75. width: 340,
  76. height: 210,
  77. element: 'canvas2',
  78. background: '#f0f0f0',
  79. progress (percent) {
  80. },
  81. finish(url) {
  82. console.log(url)
  83. let imgs = self.data.imgs;
  84. imgs.push(url);
  85. self.setData({
  86. imgs
  87. })
  88. },
  89. error (res) {
  90. }
  91. });
  92. let data = {
  93. list: [{
  94. type: 'wxml',
  95. class: '.share__canvas2 .draw_canvas',
  96. limit: '.share__canvas2',
  97. x: 0,
  98. y: 0
  99. }]
  100. }
  101. this.drawImage2.draw(data);
  102. },
  103. drawImage3 () {
  104. let self = this;
  105. this.drawImage3 = new Wxml2Canvas({
  106. width: 340,
  107. height: 210,
  108. element: 'canvas3',
  109. background: '#f0f0f0',
  110. progress (percent) {
  111. // console.log(percent)
  112. },
  113. finish(url) {
  114. let imgs = self.data.imgs;
  115. imgs.push(url);
  116. self.setData({
  117. imgs
  118. })
  119. },
  120. error (res) {
  121. }
  122. });
  123. let data = {
  124. list: [{
  125. type: 'wxml',
  126. class: '.share__canvas3 .draw_canvas',
  127. limit: '.share__canvas3',
  128. x: 0,
  129. y: 0
  130. }]
  131. }
  132. this.drawImage3.draw(data);
  133. },
  134. drawImage4 () {
  135. let self = this;
  136. this.drawImage4 = new Wxml2Canvas({
  137. width: 340,
  138. height: 400,
  139. element: 'canvas4',
  140. background: '#f0f0f0',
  141. progress (percent) {
  142. // console.log(percent)
  143. },
  144. finish(url) {
  145. let imgs = self.data.imgs;
  146. imgs.push(url);
  147. self.setData({
  148. imgs
  149. })
  150. },
  151. error (res) {
  152. }
  153. });
  154. let data = {
  155. list: [{
  156. type: 'wxml',
  157. class: '.share__canvas4 .draw_canvas',
  158. limit: '.share__canvas4',
  159. x: 0,
  160. y: 0
  161. }]
  162. }
  163. this.drawImage4.draw(data);
  164. },
  165. drawImage5 () {
  166. let self = this;
  167. this.drawImage5 = new Wxml2Canvas({
  168. width: 340,
  169. height: 210,
  170. element: 'canvas5',
  171. background: '#f0f0f0',
  172. progress (percent) {
  173. // console.log(percent)
  174. },
  175. finish(url) {
  176. let imgs = self.data.imgs;
  177. imgs.push(url);
  178. self.setData({
  179. imgs
  180. })
  181. },
  182. error (res) {
  183. }
  184. });
  185. let data = {
  186. list: [{
  187. type: 'wxml',
  188. class: '.share__canvas5 .draw_canvas',
  189. limit: '.share__canvas5',
  190. x: 0,
  191. y: 0
  192. }]
  193. }
  194. this.drawImage5.draw(data);
  195. },
  196. drawImage6 () {
  197. let self = this;
  198. this.drawImage6 = new Wxml2Canvas({
  199. width: 340,
  200. height: 450,
  201. element: 'canvas6',
  202. background: '#f0f0f0',
  203. progress (percent) {
  204. // console.log(percent)
  205. },
  206. finish(url) {
  207. let imgs = self.data.imgs;
  208. imgs.push(url);
  209. self.setData({
  210. imgs
  211. })
  212. },
  213. error (res) {
  214. }
  215. });
  216. let data = {
  217. list: [{
  218. type: 'wxml',
  219. class: '.share__canvas6 .draw_canvas',
  220. limit: '.share__canvas6',
  221. x: 0,
  222. y: 0
  223. }]
  224. }
  225. this.drawImage6.draw(data);
  226. }
  227. });