收藏
回答

CanvasContext.drawImage无法通过本地图片路径绘图 canvas类型是2d求教?

wx.chooseImage({
    successfunction(res){
            //const mainImg = canvas.createImage();       
            //mainImg.src = res.tempFilePaths[0];
            //ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 150)
            console.log(res.tempFilePaths[0])
             ctx.drawImage(res.tempFilePaths[0], 00150150)
          }
        })

(附上前面部分的代码

官方文档就这样写的啊

最后一次编辑于  2021-02-01
回答关注问题邀请回答
收藏

2 个回答

  • 黄坤
    黄坤
    2021-02-01
    const image = canvas.createIamge()
    image.onload = () => {
      ctx.drawImage(image, x, y, w, h)
    }
    image.src = 'yourLoacalUrl'
    

    如果你用的是你下面这张图的里的方式创建获取的canvas跟context 实例,用上面方法应该就可以正确绘制图片了,canvas 新api 的文档不是很全面。

    const imgPromise = new Promise((resolve, reject) => {
      const image = canvas.createIamge()
      image.onload = () => {
        resolve(image)
      }
      image.onerror = () => {
        reject(new Error(`fail to fetch image form: ${yourImageUrl}`))
      }
      image.src = yourImageUrl
    })
    
    imgPromise.then(img => {
      ctx.drawImage(img, x, y, w, h)
    })
    
    


    可以包在一个promise里面来调用。

    2021-02-01
    有用 4
    回复 1
    • 恩赐解脱
      恩赐解脱
      2021-06-01
      太感谢了xd
      2021-06-01
      回复
  • 樊晨
    樊晨
    2021-02-01

    刚刚测试发现真机上可以测试成功 开发者工具一直报错.....

    啥情况

    2021-02-01
    有用 1
    回复 2
    • 向往你的向往,幸福你的幸福
      向往你的向往,幸福你的幸福
      2021-03-10
      我也是

      GET http://tmp/6k6KUjThJ54n00721d27908f2c1aca661701c37eee81 net::ERR_PROXY_CONNECTION_FAILED
      2021-03-10
      回复
    • abu1iang
      abu1iang
      2021-08-04
      你解决了么,怎么搞的?
      2021-08-04
      回复
登录 后发表内容
问题标签