gy134340/wxml2canvas

one simple way to draw canvas

wxml2canvas

this repo isn't under maintaining now, fork and do whatever you want

Why

某些场景需要通过 canvas 绘制一些图片， 其中包含一些文字、可能的二维码等等。 然后实现时如果完全手动的去定位元素在 canvas 中的位置，结果就会产生大量不能复用和难以维护的代码。

How to use

引入 utils 目录下 utils/wxml2canvas.js 文件， 这个 repo 本身就是一个简单的示例， 调整一些配置项可以在开发者工具中打开。

wxml

<!-- 
  1. wrapper id
  2. 需要绘制的元素 className
  3. 如果是文本，需要给元素添加加 data-text 属性 
 -->
<view class="container" id="wrapper">
  <text class="title draw" data-text="Hello there">Hello there</text>
  <text class="info draw" data-text="小程序是一种新的开放能力，开发者可以快速地开发一个小程序。">
   小程序是一种新的开放能力，开发者可以快速地开发一个小程序。
  </text>
  <view class="image-wrapper draw">
    <image class="draw" src="../../assets/demo.jpg"/>
  </view>
  
  <button class="generate-btn" bindtap="drawCanvas">generate</button>
</view>
<canvas canvas-id="canvas-map" class="share-canvas"></canvas>

wxss

.container {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
 
} 
.container .title {
  font-size:36px;
  text-align: left;
  margin-bottom: 10px;

}
.container .info {
  font-size: 14px;
  line-height: 18px;
  color: grey;
  text-align: left;
  margin-bottom: 40px;
}
.container .image-wrapper image {
  width: 100%;
}

js

Page({
  drawCanvas: function() {
    const wrapperId = '#wrapper'
    const drawClassName = '.draw'
    const canvasId = 'canvas-map'
    
    wxml2canvas(wrapperId, drawClassName, canvasId).then(() => {
      // canvas has been drawn here, you can save the canvas image with wx.canvasToTempFilePath 
    })
  }
})

Demo

---

实现

方式主要是使用小程序提供的接口 wx.createSelectorQuery() 来获取节点信息， 然后进一步处理绘制到 canvas 上。目前仅覆盖一些简单的使用场景，支持基础的 position，font-size, color, image, border-radius, background-color 等， 🌟🌟

至于复杂的情况，Maybe you can get some inspiration from https://github.com/niklasvh/html2canvas

Todo

• 区分中英文文本的换行

wxml2canvas's Issues

多行文本定位错位

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

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

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

打印的是整个view

`
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实在太多了

background-color 没效果 ，加个text-align吧