点赞，我说怎么忽然就内存不足，还是新机型！

我的解决方案是：

1. 在 `wxml` 用一个假的 `view` 容器展示海报给用户，然后 `canvas` 使用 `opacity: 0` 隐藏起来（不要用 visibility: hidden 或 hidden），之前遇到某个不生效问题现在印象还深刻，具体已经不知道了，因为我用的是 `wxml-to-canvas` 这个小程序拓展库，所以也必须用 `wxml` 作为一个容器（建议不要用，还不如自己写 FUCK）
2. `canvas` 一般不会超过屏幕宽度，但是会超过评估高度，超过评估高度就会出现上面的问题，所以要判断该 `容器` 的高度是否已经超过屏幕（使用获取元素的 `api` 获取高度），如果超过了，那就按比例缩放（这个经过个人实践，就算缩放了截出来的图还是很清晰的，由于手机相册的特性，就算你保存一张高度超级高的图片，你默认展示的效果跟 `canvas` 缩放是一样的，相册也是全屏展示图片，宽度和高度被等比例缩放）

以下是我实现这个需求的笔记，由于微信开发工具展示太丑，建议复制到 `markdown` 查看：

- 实现思路与步骤


  一般的海报都带有小程序码，而小程序码是需要服务端生成之后返回一个图片地址给前端，之后再绘制出来


  由于生成海报是动态的，如文字数量不是固定的，或是生成多种海报类型，海报的高度可能不一样，而初始化组件时还需要传入 `width` 和 `height`，并且渲染元素也需要 `width` 和 `height` 属性


  1. 显示生成海报中的样式
  2. 写好一个和海报样式一模一样的容器，并使用 `visibility: hidden` 进行隐藏 
  3. 获取到该容器的宽度和高度之后再初始化 `wxml-to-canvans` 组件且把带有 `wxml-to-canvans` 组件的容器使用 `opacity: 0` 隐藏起来
  4. 获取到容器宽高之后获取小程序码
  5. 获取小程序码之后获取到 `wxml-to-canvans` 实例并调用 `renderToCanvas` 方法，这个过程需要传入 `wxml` 和 `style` 对象
  6. 渲染成功之后调用 `wxml-to-canvans` 实例的 `canvasToTempFilePath` 方法将 `canvas` 转为图片，返回图片的临时地址
  7. 拿到临时地址之后把海报的容器的 `visibility` 改为 `visible`
  8. 点击保存按钮之后需要调用 `wx.saveImageToPhotosAlbum` 的 `api`，把生成的临时地址传入即可。该 `api` 需要进行相册授权，且该授权拒绝过一次之后不再弹出授权框，需要做拒绝授权处理，如在 `fail` 函数中诱导用户打开 `wx.openSetting` 设置相册授权
  9.  保存成功之后进行成功操作即可


- 注意事项


  - 小程序对原生组件使用 `visibility: hidden` 不能达到效果，在 `ios` 中 `canvas` 依然有问题，所以使用 `opacity: 0` 进行替代（开发工具没效果）
  - `canvas` 在容器里面滚动时会跟着屏幕一起滚动（微信开发工具），在手机里面不会
  - `canvas` 的层级比较高，但是新版本可以设置 `canvas` 的层级
  - `wxml-to-canvas` 组件初始化需要一段时间，才能获取其组件并调用里面的方法
  - `wxml-to-canvans` 放在带有加载渲染逻辑的 `sort` 里面不会渲染出来，即在 `sort` 使用 `if` 操作，然后 `if` 的条件最后使用 `this.setData` 然后进行显示，这个在微信开发工具不会渲染，在手机设备没有测试过
  - `wxml-to-canvas` 第一次初始化了宽高之后，如果再对该 `width` 和 `height` 属性使用 `this.setData` 改变，这个组件的宽高有效果，但是这个组件里面的 `canvas` 不会改变，可以使用 `if` 等获取到宽高之后再渲染出来
  - `wxml-to-canvas` 调用 `renderToCanvas` 方法时，如果绘制的内容带有图片且图片是在线链接，则需要在微信公众平台设置小程序的域名配置
  - `canvas` 的宽高不能设置太大，安卓手机会出现闪退问题，`ios` 则会出现绘制白图问题
  - `canvas` 宽度或高度过高时，需要按比例缩放，否则安卓机型生成不了图片


- `canvasToTempFilePath` 的报错记录


  - `write file fail`


    `wxml-to-canvas` 在手机上调用 `canvasToTempFilePath` 方法时报 `write file fail`，原因是因为 `wxml-to-canvas` 的宽度或高度大于该组件的容器的宽度或高度，把 `wxml-to-canvas` 的 `width` 或 `height` 减去 `1` 或 `2` 就能解决问题


  - `convert native buffer parameter fail.native buffer exceed size limit`


    调用 `canvasToTempFilePath` 方法时报这个错误是因为 `canvas` 的宽度或高度太大，安卓机型的内存占用过高导致失败，需要把 `canvas` 绘制按比例缩放


- 重要实现过程


  - 获取海报样式容器的高度


    获取到容器的高度之后再初始化 `wxml-to-canvas` 组件


    ```html
    <wxml-to-canvas 
      wx:if="{{isPosterShow}}" 
      class="widget" 
      width="{{canvasWidth}}" 
      height="{{canvasHeight > screenHeight ? screenHeight : canvasHeight}}"
    ></wxml-to-canvas>
    ```


    ```js
    /**
     * 获取容器高度
     * @method getContainerHeight
     */
    getContainerHeight() {
      return new Promise((resolve, reject) => {
        const query = wx.createSelectorQuery().in(this);
        query.select('.poster-target').boundingClientRect();
        query.exec((res) => {
          this.setData({
            isPosterShow: true,
            canvasHeight: res[0].height
          })
          resolve();
        })
      })
    }
    ```


  - 自适应设备以及缩放


    不能超过屏幕高度，如果超过则需要设置为最大高度


    ```html
    <wxml-to-canvas 
      wx:if="{{isPosterShow}}" 
      class="widget" 
      width="{{canvasWidth}}" 
      height="{{canvasHeight > screenHeight ? screenHeight : canvasHeight}}"
    ></wxml-to-canvas>
    ```


    ```js
    class DprClass {
      constructor(curHeight, maxHeight) {
        this.curHeight = curHeight; // 当前容器高度
        this.maxHeight = maxHeight; // 最大高度
        this.sysInfo = wx.getSystemInfoSync();
      }


      /**
      * 处理像素比例
      * @method handlePxToRpx
      * @params {Number} num 当前设置的像素
      * @params {Boolean} isNotToRpx 不需要转换成 rpx
      * @return {Number} num 当前设置的像素
      */ 
      handlePxToRpx(num, isNotToRpx = false) {
        const w = this.sysInfo.windowWidth;
        const mw = 750; // 设计稿宽度


        // 如果是通过DOM获取的值不需要做适配
        let diffNum = isNotToRpx ? num : (w / 750 * num);


        // 如果当前高度大于最大高度，则做缩放处理
        if (this.curHeight > this.maxHeight) {
          const ratio = this.maxHeight / this.curHeight;
          diffNum = Number((diffNum * ratio).toFixed(3));
        }


        return diffNum;
      }
    }


    function renderCanvas() {
      /**
       * 必须等 wxml-to-canvas 初始化一段时间才能获取成功
       */
      this.widget = this.selectComponent('.widget');
      const dprObj = new DprClass(containerHeight, windowHeight);
      const wxml = `<text class="user-name">帅</text>`
      const style = {
        userName: {
          width: dprObj.handlePxToRpx(20),
          height: dprObj.handlePxToRpx(20),
          lineHeight: dprObj.handlePxToRpx(20),
          fontSize: dprObj.handlePxToRpx(18),
          color: '#000000'
        }
      }


      const p1 = this.widget.renderToCanvas({
        wxml: poster.wxml,
        style: poster.style
      });
      p1.then((res) => {
        this.extraImage()
      }).catch((err) => {
        console.log(err)
        this._handiePosterErr();
      })
    }
    ```

这个后面定义了x和y，从有滑动的点开始，重新设置width和height，尽量减少width和height,减少右移次数，完成需求的。

这个问题解决了吗？

请问，解决了吗？

试下设置小点正常吗？