收藏
回答

新的canvas的drawImage不支持本地tmp路径的临时文件吗?

【貌似官方修复了这个问题。现在可以了。】

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html

drawImage( )不支持本地tmp路径的临时文件,谨慎使用,太坑了。

写法1.

```

path = 'tmp/wxf65e9ae5f68283d2.o6zAJs5h4IkyHaGS7_j6gUPGTR9c.arwyj04Eq2ok341457e272957e237fa21d743912f60b.jpg'

ctx.drawImage(path, 0, 0, width, height, 0, 0, canvasWidth, canvasHeight)

```

提示: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)';at SelectorQuery callback function


写法2.

```

const img = canvas.createImage()

img.src = path

img.onload = () =>{

    ctx.drawImage(img, 0, 0, width, height, 0, 0, canvasWidth, canvasHeight)

}

```

提示:tmp/wxf65e9ae5f68283d2.o6zAJs5h4IkyHaGS7_j6gUPGTR9c.arwyj04Eq2ok341457e272957e237fa21d743912f60b.jpg:1 GET http://tmp/wxf65e9ae5f68283d2.o6zAJs5h4IkyHaGS7_j6gUPGTR9c.arwyj04Eq2ok341457e272957e237fa21d743912f60b.jpg net::ERR_PROXY_CONNECTION_FAILED

最后一次编辑于  2020-03-29
回答关注问题邀请回答
收藏

17 个回答

  • 徐军🏜
    徐军🏜
    2020-05-29

    被官方带沟里了。本来就是很简单甚至不会发生的问题。

    官方文档以前是支持 本地缓存 图片路径的。(此时你已经看了好久老版本的文档了)

    然后又说升级了,直接用 Canvas api 和 web 保持一致。(以前都知道 drawImage 接收的是 img对象,但是此时看了 createCanvasContext 文档后,就把对象给忽略了。)

    知道是为什么掉沟里了,就好办了,用本地缓存图片路径创建一个 img 对象呗。

      const imgObj = canvas.createImage()
      imgObj.src = o.tempFilePath
      imgObj.width = o.width
      imgObj.height = o.height
      imgObj.onload = function () {
        ctx.drawImage(imgObj,0,0,o.width,o.height,0,0,o.width,o.height)
      }
    
    2020-05-29
    有用 5
    回复 5
    • 2020-09-03
      是的  我也犹豫了一会;看了下web接口是image对象才明白; 文档没有及时更新;应该把老文档和新文档分开
      2020-09-03
      回复
    • Onism
      Onism
      2022-04-17
      正解, 希望能帮助后面的朋友
      2022-04-17
      1
      回复
    • 堃。
      堃。
      2022-09-25回复Onism
      现在不用临时路径,直接用网络图片地址好像也可以了
      2022-09-25
      回复
    • 陈琦
      陈琦
      2022-12-05
      有完整代码吗
      2022-12-05
      回复
    • 陈凯
      陈凯
      06-09回复堃。
      网络图片不行
      06-09
      回复
  • 涛々
    涛々
    2020-05-06

    这个使用本地临时路径不生效的话,可以试下在编辑器中,代理设置为:不使用任何代理。

    我这边是采用这个办法就可以了。。 默认的设置是使用系统代理


    2020-05-06
    有用 3
    回复
  • 宋佳耀
    宋佳耀
    2023-03-22

    2023年。。我又遇到了。。神坑啊。。 2020年我初次写某个功能的时候是只支持临时路径不支持网络路径,现在是只支持网络路径不支持临时路径了!

    2023-03-22
    有用
    回复
  • 朱高
    朱高
    2022-05-18

    切换一下基础库就行了。我真是服了,排查了一天,最后发现是基础库问题。

    开始用的是 2.18.1,不管用什么样的姿势,都是报这个错。

    后面换成 2.20.3,好了。

    再切回 2.18.1,又报错。

    可以断定是基础库的问题了。

    2022-05-18
    有用
    回复
  • Lik-
    Lik-
    2022-05-02

    方法二解决了,感谢感谢,小程序咋到处是坑,呜呜呜

    2022-05-02
    有用
    回复
  • 小赖
    小赖
    2021-09-24

    我是用临时路径,报这个错

    2021-09-24
    有用
    回复 1
    • 🦀
      🦀
      2021-11-01
      解决了嘛,兄弟
      2021-11-01
      回复
  • StayStar
    StayStar
    2021-05-25

    请问怎么解决的,我是本地绘制两张图存储成临时文件后在合成一张图,但是临时文件只有模拟器可以显示,真机不显示


    2021-05-25
    有用
    回复 1
    • 小秦
      小秦
      2022-06-17
      解决了吗,兄弟
      2022-06-17
      回复
  • 💫
    💫
    2020-08-21

    请问楼主解决了么,求把解决方案丢出来学习一下呗

    2020-08-21
    有用
    回复
  • 会飞的。鱼
    会飞的。鱼
    2020-08-07

    http://tmp/wxbde8468e947d4c31.o6zAJs1JQIwy2Ki40INmMrVA-ZqM.cGXQqpZEu2CGf0d5fff269b4dcb2cc2721c6033c2491.jpeg 绘制海报这种临时路劲开发者工具测试可以,但是发布后就没用了,这种事什么原因呢

    2020-08-07
    有用
    回复
  • 晓伟
    晓伟
    2020-06-15

    同问,一模一样的问题,大家如何解决

    2020-06-15
    有用
    回复 1
    • 晓伟
      晓伟
      2020-06-15
      重启IDE就可以,但是过一段时间又这样了。 我的天啊,真机和手机都一样。
      2020-06-15
      回复

正在加载...

登录 后发表内容
问题标签