nvue.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. // #ifdef APP-NVUE
  2. import { sleep, getImageInfo, isBase64, useNvue, networkReg } from './utils';
  3. const dom = weex.requireModule('dom')
  4. import { version } from '../../package.json'
  5. export default {
  6. data() {
  7. return {
  8. tempFilePath: [],
  9. isInitFile: false,
  10. osName: uni.getSystemInfoSync().osName
  11. }
  12. },
  13. methods: {
  14. getParentWeith() {
  15. return new Promise(resolve => {
  16. dom.getComponentRect(this.$refs.limepainter, (res) => {
  17. this.parentWidth = Math.ceil(res.size.width)
  18. this.canvasWidth = this.canvasWidth || this.parentWidth ||300
  19. this.canvasHeight = res.size.height || this.canvasHeight||150
  20. resolve(res.size)
  21. })
  22. })
  23. },
  24. onPageFinish() {
  25. this.webview = this.$refs.webview
  26. this.webview.evalJS(`init(${this.dpr})`)
  27. },
  28. onMessage(e) {
  29. const res = e.detail.data[0] || null;
  30. if (res.event) {
  31. if (res.event == 'inited') {
  32. this.inited = true
  33. }
  34. if(res.event == 'fail'){
  35. this.$emit('fail', res)
  36. }
  37. if (res.event == 'layoutChange') {
  38. const data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data
  39. this.canvasWidth = Math.ceil(data.width);
  40. this.canvasHeight = Math.ceil(data.height);
  41. }
  42. if (res.event == 'progressChange') {
  43. this.progress = res.data * 1
  44. }
  45. if (res.event == 'file') {
  46. this.tempFilePath.push(res.data)
  47. if (this.tempFilePath.length > 7) {
  48. this.tempFilePath.shift()
  49. }
  50. return
  51. }
  52. if (res.event == 'success') {
  53. if (res.data) {
  54. this.tempFilePath.push(res.data)
  55. if (this.tempFilePath.length > 8) {
  56. this.tempFilePath.shift()
  57. }
  58. if (this.isCanvasToTempFilePath) {
  59. this.setFilePath(this.tempFilePath.join(''), {isEmit:true})
  60. }
  61. } else {
  62. this.$emit('fail', 'canvas no data')
  63. }
  64. return
  65. }
  66. this.$emit(res.event, JSON.parse(res.data));
  67. } else if (res.file) {
  68. this.file = res.data;
  69. } else{
  70. console.info(res[0])
  71. }
  72. },
  73. getWebViewInited() {
  74. if (this.inited) return Promise.resolve(this.inited);
  75. return new Promise((resolve) => {
  76. this.$watch(
  77. 'inited',
  78. async val => {
  79. if (val) {
  80. resolve(val)
  81. }
  82. }, {
  83. immediate: true
  84. }
  85. );
  86. })
  87. },
  88. getTempFilePath() {
  89. if (this.tempFilePath.length == 8) return Promise.resolve(this.tempFilePath)
  90. return new Promise((resolve) => {
  91. this.$watch(
  92. 'tempFilePath',
  93. async val => {
  94. if (val.length == 8) {
  95. resolve(val.join(''))
  96. }
  97. }
  98. );
  99. })
  100. },
  101. getWebViewDone() {
  102. if (this.progress == 1) return Promise.resolve(this.progress);
  103. return new Promise((resolve) => {
  104. this.$watch(
  105. 'progress',
  106. async val => {
  107. if (val == 1) {
  108. this.$emit('done')
  109. this.done = true
  110. this.runTask()
  111. resolve(val)
  112. }
  113. }, {
  114. immediate: true
  115. }
  116. );
  117. })
  118. },
  119. async render(args) {
  120. try {
  121. await this.getSize(args)
  122. const {width} = args.css || args
  123. if(!width && this.parentWidth) {
  124. Object.assign(args, {width: this.parentWidth})
  125. }
  126. const newNode = await this.calcImage(args);
  127. await this.getWebViewInited()
  128. this.webview.evalJS(`source(${JSON.stringify(newNode)})`)
  129. await this.getWebViewDone()
  130. await sleep(this.afterDelay)
  131. if (this.isCanvasToTempFilePath) {
  132. const params = {
  133. fileType: this.fileType,
  134. quality: this.quality
  135. }
  136. this.webview.evalJS(`save(${JSON.stringify(params)})`)
  137. }
  138. return Promise.resolve()
  139. } catch (e) {
  140. this.$emit('fail', e)
  141. }
  142. },
  143. async calcImage(args) {
  144. let node = JSON.parse(JSON.stringify(args))
  145. const urlReg = /url\((.+)\)/
  146. const {backgroundImage} = node.css||{}
  147. const isBG = backgroundImage && urlReg.exec(backgroundImage)[1]
  148. const url = node.url || node.src || isBG
  149. if(['text', 'qrcode'].includes(node.type)) {
  150. return node
  151. }
  152. if ((node.type === "image" || isBG) && url && !isBase64(url) && (this.osName == 'ios' || !networkReg.test(url))) {
  153. let {path} = await getImageInfo(url, true)
  154. if (isBG) {
  155. node.css.backgroundImage = `url(${path})`
  156. } else {
  157. node.src = path
  158. }
  159. } else if (node.views && node.views.length) {
  160. for (let i = 0; i < node.views.length; i++) {
  161. node.views[i] = await this.calcImage(node.views[i])
  162. }
  163. }
  164. return node
  165. },
  166. async canvasToTempFilePath(args = {}) {
  167. if (!this.inited) {
  168. return this.$emit('fail', 'no init')
  169. }
  170. this.tempFilePath = []
  171. if (args.fileType == 'jpg') {
  172. args.fileType = 'jpeg'
  173. }
  174. this.webview.evalJS(`save(${JSON.stringify(args)})`)
  175. try {
  176. let tempFilePath = await this.getTempFilePath()
  177. tempFilePath = await this.setFilePath(tempFilePath, args)
  178. args.success({
  179. errMsg: "canvasToTempFilePath:ok",
  180. tempFilePath
  181. })
  182. } catch (e) {
  183. args.fail({
  184. error: e
  185. })
  186. }
  187. }
  188. }
  189. }
  190. // #endif