收藏
回答

canvasToTempFilePath:fail Failed?

返回的错误信息:

{"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)'"}


使用的是uni-app工具,相关代码如下:

<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: orange;
    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>

回答关注问题邀请回答
收藏

1 个回答

  • luck!
    luck!
    07-01

    解决了吗?

    07-01
    有用
    回复
登录 后发表内容