问题描述

使用 wxml-to-canvas 来生成 canvas，遇到了以下问题：

1、在官方 demo 中，可以在<image>中使用外部 url 的图片，模拟器调试无问题，真机预览也无问题；

2、在本人的实际项目中，若在<image>中使用了外部 url 的图片，模拟器调试无问题。但若用真机预览，则图片无法显示（如果多次调用 renderToCanvas，图片的框会逐渐显示出来（每次显示出若干像素，逐渐凑成一个框），偶尔会闪现出一片纯色，但是无法显示图片）；

3、在本人的实际项目中，若在<image>中使用了云储存的图片，模拟器调试无问题，真机预览也无问题；

PS：本人项目已开启「不校验合法域名、web-view……」这个选项。

是不是我本人项目有些东西没有设置正确，导致跟 demo 出现了不一样的结果？

本人项目设置：
- 开发者工具版本：Stable 1.05.2110290
- 调试基础库 2.17.0

图1：模拟器中，一切正常：

图2：真机调试，无法显示图片：

图3：真机调试多次调用渲染到canvas后，图片处显示出一圈轮廓：

wxml 部分的代码：

<wxml-to-canvas class="widget"></wxml-to-canvas>

<button bindtap="renderToCanvas">渲染到canvas</button>
<button bindtap="extraImage">导出图片</button>
<view style="word-break:break-all;">调试信息{{tempLog}}</view>

<image src="{{src}}" show-menu-by-longpress="1"></image>

js 部分的代码

let wxml = `
<view class="container" >
  <view class="item-box red">
  </view>
  <view class="item-box green" >
    <text class="text">yeah!</text>
  </view>
  <view class="item-box blue">
      <image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image>
  </view>
</view>
`

let style = {
  container: {
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ccc',
    alignItems: 'center',
  },
  itemBox: {
    width: 80,
    height: 60,
  },
  red: {
    backgroundColor: '#ff0000'
  },
  green: {
    backgroundColor: '#00ff00'
  },
  blue: {
    backgroundColor: '#0000ff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    width: 80,
    height: 60,
    textAlign: 'center',
    verticalAlign: 'middle',
  },
  img: {
    width: 40,
    height: 40,
    borderRadius: 20,
  }
}


Page({
  data: {
    src: ''
  },
  onLoad(options) {
    this.widget = this.selectComponent('.widget')
  },
  renderToCanvas() {
    const p1 = this.widget.renderToCanvas({
      wxml,
      style
    })
    p1.then((res) => {
      console.log('container', res.layoutBox)
      this.container = res
    })
  },
  extraImage() {
    const p2 = this.widget.canvasToTempFilePath()
    p2.then(res => {
      this.setData({
        tempLog: this.data.tempLog + ' then2path ' + res.tempFilePath,
      })
      this.setData({
        src: res.tempFilePath,
      })
    })
  }
})