zxw12002@gmail.com
zxw12002@gmail.com
  • 发布:4 天前
  • 更新:1 天前
  • 阅读:85

【报Bug】【紧急紧急紧急】在canvas中绘制图片后,无法 canvasToTempFilePath 导出图片。100%复现。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: 小米9Pro 5G

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:
<template>  
    <view class="content">  
        <image class="logo" :src="canvasPic" style="background-color: #fcc;"></image>  
        <canvas canvas-id="posterCanvas" style="width:320px;height:240px;background: #ccf;"></canvas>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                canvasPic :  ''  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
      async downloadPic(url) {  
        return new Promise((resolve, reject) => {  
          uni.downloadFile({  
            url: url,  
            success: res => {  
              resolve(res.tempFilePath);  
            },  
            fail: () => {  
              reject('图片下载失败');  
            }  
          });  
        });  
      },  
        },  

    async mounted() {  
      let ctx = uni.createCanvasContext('posterCanvas');  

      ctx.setFillStyle('#0f0');  
      ctx.fillText("哈哈哈1", 30, 30);  

      let pic;  

      pic = '/static/logo.png';  
      ctx.drawImage(pic, 0, 0, 100, 100);  

      pic = await this.downloadPic('https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uniapp4@2x.png');  
      ctx.drawImage(pic, 100, 140, 200, 60);  

      ctx.draw(true, ()=>{  
        uni.canvasToTempFilePath({  
          canvasId: 'posterCanvas',  
          x: 0,  
          y: 0,  
          width: 320,  
          height: 240,  
          destWidth: 320,  
          destHeight: 240,  
          success: res => {  
            this.canvasPic = res.tempFilePath;  
          },  
          complete: (rs) => {  
            console.log('canvasToTempFilePath', rs)  
          }  
        });  
      });  
    }  
    }  
</script>  

预期结果:

canvas正常生成最终图片

实际结果:

js报错 ,图片生成失败

bug描述:

后续补充:锅应该来自MIUI升级,因为我将之前打包的App安装后,依旧有这个问题(之前测试的时候是不存在的)。。。 但是但是,依旧请官方看看小米到底给你们挖了什么坑,解决此问题。。。 小米 webview版本: 85.0.4183.101

在canvas中绘制图片后,无法 canvasToTempFilePath 导出图片,直接报错。

TypeError: Cannot read property 'data' of undefined at view.umd.min.js:1

另外,之前 2.8.11 版本也有此问题 ,降级到2.8.8之后依旧发生 。

其他手机不确定,但是小米9Rro 5G, MIUI12 开发板最新版本, 100%毕现。下方代码可以直接重现。

<template>  
    <view class="content">  
        <image class="logo" :src="canvasPic" style="background-color: #fcc;"></image>  
        <canvas canvas-id="posterCanvas" style="width:320px;height:240px;background: #ccf;"></canvas>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                canvasPic :  ''  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
      async downloadPic(url) {  
        return new Promise((resolve, reject) => {  
          uni.downloadFile({  
            url: url,  
            success: res => {  
              resolve(res.tempFilePath);  
            },  
            fail: () => {  
              reject('图片下载失败');  
            }  
          });  
        });  
      },  
        },  

    async mounted() {  
      let ctx = uni.createCanvasContext('posterCanvas');  

      ctx.setFillStyle('#0f0');  
      ctx.fillText("哈哈哈1", 30, 30);  

      let pic;  

      pic = '/static/logo.png';  
      ctx.drawImage(pic, 0, 0, 100, 100);  

      pic = await this.downloadPic('https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uniapp4@2x.png');  
      ctx.drawImage(pic, 100, 140, 200, 60);  

      ctx.draw(true, ()=>{  
        uni.canvasToTempFilePath({  
          canvasId: 'posterCanvas',  
          x: 0,  
          y: 0,  
          width: 320,  
          height: 240,  
          destWidth: 320,  
          destHeight: 240,  
          success: res => {  
            this.canvasPic = res.tempFilePath;  
          },  
          complete: (rs) => {  
            console.log('canvasToTempFilePath', rs)  
          }  
        });  
      });  
    }  
    }  
</script>  
4 天前 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

问题同:https://ask.dcloud.net.cn/question/103303

LeoHuang

LeoHuang

我运气比你好,我2.8.8可以导出来,2.8.11完全不能用,看更新日志说2.8.11优化了加载速度,我看来,这是负向优化。
早上提了问题也没人回复

  • zxw12002@gmail.com (作者)

    泪崩.....

    4 天前

  • zxw12002@gmail.com (作者)

    我发现 2.8.11 版本有问题,然后回退到 2.8.8 版本,发现问题依旧存在。。。

    4 天前

  • DCloud_UNI_GSQ

    真的吗?

    3 天前

  • DCloud_UNI_GSQ

    这是你提的问题:https://ask.dcloud.net.cn/question/107131 我从昨天就开始验证和跟进

    3 天前

弄月

弄月

华为手机也是一样,这应该是uni-app的问题

872111330@qq.com

872111330@qq.com

不光华为,我目前手头的安卓手机全部沦陷

要回复问题请先登录注册