Taro: canvas ctx.draw(false,callback) 不执行版本已是最新 this.$scope 也添加

Created on 8 Jul 2019 · 12Comments · Source: NervJS/taro

问题描述

使用canvas 绘制海报 ctx.draw(false, callback) 不执行不报错

直接跳过了draw 执行

图中代码可以使用原生的都试过也是不行
Taro Cli 等版本已经更新到最新

[代码只贴截图，不贴文字会被视为无效issue]
[代码只贴截图，不贴文字会被视为无效issue]
[代码只贴截图，不贴文字会被视为无效issue]

```js
// 代码里面Taro.createCanvasContext() 也曾加过 this.$scope 也曾替换成wx.createCanvasContext() 一样没效果

Taro.getImageInfo({
src: qrcode.path,
success: (res) => {
wx.getImageInfo({
src: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83ep3biao8GyDemyuQL4ul1jwlsH6vJnDBvW6CXqeqssypfVmCOwj0Hk95lpvQwstds9oZq5tusB7K3g/132",
success: (ava) => {
const ctx = Taro.createCanvasContext('canvas')
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, 375, 550)
// 背景
ctx.drawImage(res.path, 0, 0, 375, 550)
ctx.drawImage(that.state.qrcode, 375 - 60 - 20, 20, 60, 60)

                ctx.save();
                ctx.beginPath()
                ctx.arc((375) / 2, 430, 20, 0, 2 * Math.PI)
                ctx.clip()

                ctx.drawImage(ava.path, (375 - 40) / 2, 410, 40, 40)

                ctx.restore()

                ctx.font = 'normal bold 14px sans-serif'
                ctx.setTextAlign('center')
                ctx.fillText("ICE", 375 / 2, 480)

                ctx.font = 'normal bold 14px sans-serif'
                ctx.setTextAlign('center')
                ctx.fillText("太棒啦,快来找你喜欢的主播吧", 375 / 2, 390)

                console.log(0)

                ctx.draw(false, (e) => {
                  console.log(1)
                  Taro.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 375,
                    height: 550,
                    destWidth: 375 * that.state.pixelRatio,
                    destHeight: 550 * that.state.pixelRatio,
                    canvasId: 'canvas',
                    success: (res) => {
                      console.log(2)
                      that.setState({
                        url: res.tempFilePath,
                        loading: false
                      })
                    }
                  }, this)
                })
                console.log(3)
              }
            })
          },
          fail: function (res) {
            console.log(res)
          }
        })

// ```

系统信息

👽 Taro v1.3.5

Taro CLI 1.3.5 environment info:
System:
OS: OS X El Capitan 10.11.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
@tarojs/async-await: 1.3.5 => 1.3.5
@tarojs/components: 1.3.5 => 1.3.5
@tarojs/plugin-babel: 1.3.5 => 1.3.5
@tarojs/plugin-csso: 1.3.5 => 1.3.5
@tarojs/plugin-less: 1.3.5 => 1.3.5
@tarojs/plugin-uglifyjs: 1.3.5 => 1.3.5
@tarojs/redux: 1.3.5 => 1.3.5
@tarojs/redux-h5: 1.3.5 => 1.3.5
@tarojs/router: 1.3.5 => 1.3.5
@tarojs/taro: 1.3.5 => 1.3.5
@tarojs/taro-alipay: 1.3.5 => 1.3.5
@tarojs/taro-h5: 1.3.5 => 1.3.5
@tarojs/taro-swan: 1.3.5 => 1.3.5
@tarojs/taro-tt: 1.3.5 => 1.3.5
@tarojs/taro-weapp: 1.3.5 => 1.3.5
@tarojs/webpack-runner: 1.3.5 => 1.3.5
eslint-config-taro: 1.3.5 => 1.3.5
eslint-plugin-taro: 1.3.5 => 1.3.5
nerv-devtools: ^1.4.3 => 1.4.3
nervjs: ^1.4.3 => 1.4.3
npmGlobalPackages:
typescript: 3.5.1

补充信息

question

Source

lzt9977

All 12 comments

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

taro-bot[bot] on 8 Jul 2019

@lzt9977 可以写个原生的 demo 看看行不行。https://nervjs.github.io/taro/docs/debug.html#api-%E8%B0%83%E7%94%A8%E7%BB%93%E6%9E%9C%E4%B8%8D%E7%AC%A6%E5%90%88%E9%A2%84%E6%9C%9F

Chen-jj on 8 Jul 2019

@lzt9977 可以写个原生的 demo 看看行不行。https://nervjs.github.io/taro/docs/debug.html#api-%E8%B0%83%E7%94%A8%E7%BB%93%E6%9E%9C%E4%B8%8D%E7%AC%A6%E5%90%88%E9%A2%84%E6%9C%9F

您好我这个小程序之前是使用原生的写的没问题。最近想用taro重构一下发现的这个问题代码里面所有的Taro.fn 我都换成过 wx.fn 关键是没有任何报错控制台和小程序里面都是没有报错信息直接跳过了 ctx.draw

lzt9977 on 8 Jul 2019

@lzt9977 你解决这个问题了嘛？我也遇到了...