H5的Canvas DrawImage一直报错



  • 在H5中使用chooseImage选择图片,然后显示到Canvas上

    Taro.chooseImage({
          count: 1,
          success: function (res) {
            let imgPath = res.tempFilePaths[0]
            Taro.getImageInfo({
              src: imgPath
            }).then(imgRes => {
              const ctx = Taro.createCanvasContext("customCanvas", this);
              ctx.drawImage(imgPath, 0, 0, 100, 100, 0, 0, 100, 100);
              ctx.draw(false)
            })
          }
        })
    

    报错信息:
    "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)'"

    经过阅读taro-h5中createCanvasContext.js中的源码,drawImage调用的是canvas原生的方法,第一个参数就是image,但taro的Canvas.drawImage第一个参数是string,源码中没看到转换的地方,是我哪里使用有问题吗?

    本意是想通过Canvas压缩图片再上传,在H5中还有会更好的办法吗


登录后回复