程小玄o
程小玄o
  • 发布:2024-04-01 15:50
  • 更新:2024-04-03 15:59
  • 阅读:269

【报Bug】canvasToTempFilePath:fail Failed to execute

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 4.07

第三方开发者工具版本号: Stable Build 1.06.2402040

基础库版本号: 3.3.5

项目创建方式: HBuilderX

示例代码:
<template>  
  <view class="c-display-flex-V-center my-page-container" @click="downloadImg">  
    <!-- <view class="my-page-canvas-core">  
      <image src="../../static/images/invitation_head.png" class="core-head-image" />  
      <view class="core-content-image" />  
    </view> -->  
    <!-- <canvas canvas-id="myCanvas" class="my-page-canvas" /> -->  
    <canvas type="2d" id="myCanvas" class="my-page-canvas" />  
  </view>  
</template>  

<script>  
  const ctxW = 280;  
  const ctxH = 275;  
  export default {  
    name: 'invitation',  
    components: {  
      myGridItem,  
    },  
    data() {  
      return {  
        canvasObject: undefined,  
      };  
    },  
    beforeCreate() {  
      console.log('beforeCreate enter');  
    },  
    created() {  
      console.log('created enter');  
    },  
    mounted() {  
      console.log('mounted enter');  
    },  
    onLoad(option) {  
      console.log('onLoad');  
    },  
    onReady() {  
      this.drawCanvas();  
    },  
    methods: {  
      /* 注: 使用createCanvasContext绘制出来的画面模糊。 */  
      // drawCanvas() {  
      //   let offsetY = 15;  
      //   const ctxW = 280;  
      //   const ctxH = 275;  

      //   const ctx = uni.createCanvasContext('myCanvas', this);  

      //   /* 绘制背景颜色 */  
      //   // ctx.setFillStyle('orange');  
      //   // ctx.fillRect(0, 0, ctxW, ctxH);  

      //   /* 绘制头部图片 */  
      //   ctx.drawImage('../../static/images/invitation_head.png', (ctxW - 250) / 2, offsetY, 250, 35);  

      //   /* 绘制二维码 */  
      //   offsetY += (35 + 10);  
      //   ctx.setFillStyle('#f3f3f3');  
      //   ctx.fillRect((ctxW - 200) / 2, offsetY, 200, 200);  

      //   ctx.draw();  
      // },  
      drawCanvas() {  
        /* query.select("#id") / uery.select(".class") */  
        const query = uni.createSelectorQuery().in(this);  
        let _this = this;  

        // query.select("#myCanvas")  
        //   .boundingClientRect((data) => {  
        //     console.log("得到布局信息: " + JSON.stringify(data));  
        //   })  
        //   .exec();  

        query.select("#myCanvas")  
          .fields({  
            node: true,  
            size: true,  
          })  
          .exec(async (res) => {  
            console.log("res: " + JSON.stringify(res));  
            _this.canvasObject = res[0].node.id;  
            const canvas = res[0].node;  
            const ctx = canvas.getContext('2d');  
            console.log('canvas.ctx', ctx.drawImage);  

            let offsetY = 15;  
            const dpr = wx.getSystemInfoSync().pixelRatio;  
            canvas.width = ctxW * dpr;  
            canvas.height = ctxH * dpr;  
            console.log('canvas.size', canvas.width, canvas.height);  
            ctx.scale(dpr, dpr);  

            /* 绘制背景颜色 */  
            // ctx.fillStyle = 'orange';  
            // ctx.fillRect(0, 0, ctxW, ctxH);  

            /* 绘制头部图片 */  
            let _offsetY = offsetY;  
            const imageSrc = '../../static/images/invitation_head.png';  
            //let image = new Image();  
            let image = canvas.createImage();  
            // image.src = imageSrc;  
            // image.onload = () => {  
            //   ctx.drawImage(image, (ctxW - 250) / 2, _offsetY, 250, 35);  
            // };  
            await new Promise(resolve => {  
              image.onload = resolve;  
              image.src = imageSrc;  
            });  
            ctx.drawImage(image, (ctxW - 250) / 2, _offsetY, 250, 35);  

            /* 绘制二维码 */  
            offsetY += (35 + 10);  
            ctx.fillStyle = '#f3f3f3';  
            ctx.fillRect((ctxW - 200) / 2, offsetY, 200, 200);  
          });  
      },  
      downloadImg() {  
        uni.showLoading({  
          title: '正在下载...',  
        });  
        uni.canvasToTempFilePath({  
          //canvasId: 'myCanvas',  
          canvas: this.canvasObject,  
          x: 0,  
          y: 0,  
          width: ctxW,  
          height: ctxH,  
          destWidth: ctxW,  
          destHeight: ctxH,  
          quality: 1.0,  
          success: function(res) {  
            console.log('canvasToTempFilePath_success');  
            uni.saveImageToPhotosAlbum({  
              filePath: res.tempFilePath,  
              success: function(saveRes) {  
                uni.showToast({  
                  title: '保存成功',  
                });  
              },  
              fail: function(saveErr) {  
                if (saveErr.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||  
                  saveErr.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||  
                  saveErr.errMsg === 'saveImageToPhotosAlbum:fail authorize no response'  
                ) {  
                  uni.showModal({  
                    title: '需要您授权保存相册',  
                    modalType: false,  
                    success: modalRes => {  
                      uni.openSetting({  
                        success(settingRes) {  
                          console.log('settingRes', JSON.stringify(settingRes));  
                          if (settingRes.authSetting['scope.writePhotosAlbum']) {  
                            wx.showModal({  
                              title: '温馨提醒',  
                              content: '获取权限成功,再次点击保存即可~',  
                              modalType: false,  
                            })  
                          } else {  
                            wx.showModal({  
                              title: '温馨提醒',  
                              content: '获取权限失败,将无法保存到相册哦~',  
                              modalType: false,  
                            })  
                          }  
                        },  
                        fail(settingError) {  
                          console.log('settingError', JSON.stringify(settingError));  
                        },  
                      });  
                    },  
                  });  
                }  
              },  
            });  
          },  
          fail: function(err) {  
            console.log('canvasToTempFilePath_fail', JSON.stringify(err));  
            uni.showToast({  
              title: '生成图片失败',  
            });  
          },  
        }, this);  
      },  
    },  
  }  
</script>  

<style scoped>  
  .my-page-container {  
    background-color: white;  
    height: 500px;  
  }  

  .my-page-canvas {  
    width: 280px;  
    height: 275px;  
  }  

  .my-page-canvas-core {  
    box-sizing: border-box;  
    width: 280px;  
    height: 275px;  
    padding: 15px;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
  }  

    .core-head-image {  
      width: 250px;  
      height: 35px;  
    }  

    .core-content-image {  
      margin-top: 10px;  
      width: 200px;  
      height: 200px;  
      background-color: #f3f3f3;  
    }  
</style>

操作步骤:

点击图片区域,即可触发下载任务。

预期结果:

能够生成图片并保存到相册中。

实际结果:

生成图片失败。

bug描述:

Canvas绘制并生成图片失败,报错信息如下:

{"errMsg":"canvasToTempFilePath:fail Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas or VideoFrame)'"}

2024-04-01 15:50 负责人:无 分享
已邀请:
毛毛不是泰迪

毛毛不是泰迪

小程序把 type="2d"去掉就好了

  • 程小玄o (作者)

    <canvas canvas-id="myCanvas" class="my-page-canvas" />  
    <!-- <canvas type="2d" id="myCanvas" class="my-page-canvas" /> -->

    把 type="2d"去掉,使用createCanvasContext绘制画面的图片很模糊。

    2024-04-01 16:08

程小玄o

程小玄o (作者)

要回复问题请先登录注册