gy134340 / wxml2canvas Goto Github PK

demo直接跑的，模拟器上使用没问题，但是在真机上，图片就不显示了

`
1.第一点
传入的#wrapper好像没有什么用
drawCanvas: function() {
const wrapperId = '#wrapper'
const drawClassName = '.draw'
const canvasId = 'canvas-map'

wxml2canvas(wrapperId, drawClassName, canvasId).then(() => {
  // canvas has been drawn
  // can save the image with wx.canvasToTempFilePath and wx.saveImageToPhotosAlbum 
})

},
我以为可以区域转canvas，结果是每次都是整个xml的view转，
举个例子

<text  data-text="465565">AAAAAA</text>
<text  data-text="465565">AAAAAA</text>
<text  data-text="465565">AAAAAA</text>
<text class="draw" data-text="只有这里才会转canvas">hgjghjgghjgj</text>
<text  data-text="465565">AAAAAA</text>
<text  data-text="465565">AAAAAA</text>
<text  data-text="465565">AAAAAA</text>

// 很明显，只有有类名draw的才会转canvas，那其他view没有draw类名的都会当空行处理
这就有点问题了，我本来要是要将

<text class="draw" data-text="只有这里才会转canvas">hgjghjgghjgj</text>

转canvas画在顶部，实际是画在中间的位置，整个有点不合理，应该是有什么就画什么，不应该出现空白。。。。
`
2.第二，如果文字中英文混合，有时也会出现乱码的情况
3.如果文字有空格也会出现错乱

bug实在太多了

drawMutipleLine 方法中这一段代码：const lineHieght = lineHeightAttr === 'normal' ? Math.round(1.2 * letterWidth) : lineHeightAttr 因为letterWidth变量是一个字符串，所以导致最后计算lineHieght为NAN，最终导致多行文本定位错位。
应改为 ： const lineHieght = lineHeightAttr === 'normal' ? Math.round(1.2 * Number(letterWidth.replace('px',''))) : lineHeightAttr