Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

安卓和ios图片都没有渲染出来 #10

Closed
yajore opened this issue Feb 27, 2021 · 2 comments
Closed

安卓和ios图片都没有渲染出来 #10

yajore opened this issue Feb 27, 2021 · 2 comments

Comments

@yajore
Copy link

yajore commented Feb 27, 2021

downFile域名白名单已加,
没有勾选 不校验域名,我自己使用downFile也成功的,应该不是这个问题
但是真机上图片出不来,文字是显示了,排版也正常
模拟器上是可以的
还有什么问题导致?
有个lifecycle事件用处是什么?
可以看下下面的代码哪里有问题

drawPoster() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        console.log('dpr', dpr)
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        // ctx.scale(dpr, dpr)
        const containerWidth = canvas.width;
        const containerHeight = canvas.height;
        this.canvas = canvas;
        this.layer = ef.createLayer(ctx, {
          dpr,
          width: containerWidth,
          height: containerHeight,
          lifecycle: {
            onEffectSuccess: () => {
              console.log('onEffectSuccess')
            },
            onEffectFail() {
              // 网络请求失败
              showToast('部分图片下载失败')
            },
          }, canvas
        })
        this.createNode(containerWidth, containerHeight)
      })
  },
  createNode(containerWidth, containerHeight) {
    // 商品数据
    const detail = this.data.detail;
    // 小程序路径
    const params = { path: 'pages/index/index', appId: config.appId, scene: `0_${detail.spuId}_${detail.activityId}` };
    // 小程序二维码地址
    const qrurl = `${config.baseUrl2}/api/mp/create-unlimit-qrcode?${app.toQuery(params)}`
    console.log(`qrurl`, qrurl)
    this.setData({
      qrurl
    })
    // logo
    const logoUrl = `https://myunonline-qyyx-1304736005.cos.ap-shanghai.myqcloud.com/mp-customer-images/logo-share.png`;
    // Promise.all([
    //   downloadFile(logoUrl),
    //   downloadFile(detail.sharePicUrl),
    //   downloadFile(qrurl)
    // ]).then(tempFiles => {
    //   console.log('tempFils', tempFiles)
    // }).catch(err => {
    //   console.error('tempFils err', err)
    // })
    const node = ef.createElement(c => {
      return c(
        'view',
        {
          styles: {
            backgroundColor: '#fff',
            width: containerWidth,
            height: containerHeight
          }
        },
        [
          // logo
          c(
            'view',
            {
              styles: {
                backgroundColor: '#fff',
                textAlign: 'center',
                display: 'flex',
                justifyContent: 'center',
                marginTop: 20
              }
            },
            [
              c(
                'image',
                {
                  styles: {
                    width: 68
                  },
                  attrs: {
                    src: logoUrl,
                  },
                }
              )
            ]
          ),
          // 商品图片
          c(
            'view',
            {
              styles: {
                backgroundColor: '#fff',
                textAlign: 'center',
                display: 'flex',
                justifyContent: 'center',
                marginTop: 20
              }
            },
            [
              c(
                'image',
                {
                  styles: {
                    width: containerWidth - 120,
                    height: containerWidth - 120,
                    borderRadius: 25,
                  },
                  attrs: {
                    src: detail.sharePicUrl,
                  },
                }
              )
            ]
          ),
          // 商品标题
          c(
            'view',
            {
              styles: {
                backgroundColor: '#fff',
                marginTop: 20,
                marginLeft: 60,
                marginRight: 60
              }
            },
            [
              c(
                'text',
                {
                  styles: {
                    fontSize: 30,
                    color: '#000',
                    maxLine: 2
                  },
                },
                detail.shareTitle,
              )
            ]
          ),
          // 商品推荐语
          c(
            'view',
            {
              styles: {
                backgroundColor: '#fbfbfb',
                borderRadius: 15,
                borderColor: 'rgba(221, 221, 221, .6)',
                borderWidth: 1,
                marginTop: 20,
                marginLeft: 60,
                marginRight: 60,
                padding: [17, 26, 17, 26]
              }
            },
            [
              c(
                'text',
                {
                  styles: {
                    fontSize: 20,
                    color: '#000',
                    maxLine: 1
                  },
                },
                detail.shareDesc,
              )
            ]
          ),
          // 小程序码
          c(
            'view',
            {
              styles: {
                borderTopWidth: 1,
                display: 'flex',
                borderColor: '#eeeeee',
                marginTop: 20,
                alignItems: 'center',
                padding: [20, 60, 20, 60]
              },
            },
            [
              c('image', {
                styles: {
                  width: 140,
                  height: 140,
                  borderRadius: 140,
                },
                attrs: {
                  src: qrurl,
                },
              }),
              c('text', {
                styles: {
                  flex: 1,
                  paddingLeft: 30,
                  fontSize: 28,
                  color: '#000'
                }
              }, '长按识别查看商品详情')],
          ),
        ],
      );
    });
    node.mount(this.layer)
    console.log(node)
  }
@Gitjinfeiyang
Copy link
Owner

1、图片问题,把dist里的easyCanvas.min.js替换examle/weapp里的,之前example里面的有可能没更新,现在已经更新了,如果还是不可以,请提供下系统版本和微信版本,目前有反馈 ios 微信7.0.20 版本api有问题

2、lifecycle里目前的两个生命周期都是针对有绘制网络图片的情况的,图片请求成功并且绘制成功触发onEffectSuccess

@yajore
Copy link
Author

yajore commented Mar 1, 2021

是问题1导致的,目前已OK

@yajore yajore closed this as completed Mar 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants