收藏
回答

新的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 个回答

  • ediv Lin
    ediv Lin
    2020-06-06

    我也碰到这个问题,模拟器不用代理可以正常画图,真机还是不可以,你们怎么处理的?

    2020-06-06
    有用
    回复
  • 刘石清Terry
    刘石清Terry
    2020-05-22

    这个问题还没解决啊,我也碰到同样的问题

    2020-05-22
    有用
    回复 1
    • 刘石清Terry
      刘石清Terry
      2020-05-22
      同样的代码,我写到代码片断中就没有问题了
      2020-05-22
      回复
  • 神经蛙
    神经蛙
    2020-04-01

    可以存到云服务器,然后

    wx.cloud.getTempFileURL


    2020-04-01
    有用
    回复 2
    • suns
      suns
      2020-04-02
      不可行的这个,我要实现的就是上传之前用canvas压缩减少体积
      2020-04-02
      回复
    • 单身了21年_
      单身了21年_
      2020-08-21
      客户端就可以解决的事情,为啥要上传一遍再下载一遍呢
      2020-08-21
      回复
  • Gavin
    Gavin
    2020-03-27

    你的写法有问题吧

     ctx.fillText(`经办人:${obj.partyAOperator}`,20,1040);

        ctx.save();

        ctx.beginPath();

        let seal = canvas.createImage();

        seal.src = '../../resource/image/seal.png';

        seal.onload = (res=> {

          ctx.drawImage(seal,00150150);

        }

        ctx.closePath();

        ctx.restore();

        ctx.fillText("乙方(电子签名):",20,1080);

    我的都没问题受了你方法二的启发

    2020-03-27
    有用
    回复 11
    • suns
      suns
      2020-03-27
      用代码文件夹里的图片(“../../resource/image/seal.png”)是没问题,我意思是使用临时文件,也就是路径类似“tmp/wxf65e9ae5f68283d2.o6zAJs5h4IkyHaGS7_j6gUPGTR9c.arwyj04Eq2ok341457e272957e237fa21d743912f60b.jpg”这样的,不行。
      2020-03-27
      回复
    • Gavin
      Gavin
      2020-03-27回复suns
      稍等我试试
      2020-03-27
      回复
    • suns
      suns
      2020-03-27
      我想实现的功能是用canvas压缩图片,图片都是从相册里面选的。
      2020-03-27
      回复
    • Gavin
      Gavin
      2020-03-29回复suns
      没问题啊可以用临时路径
      2020-03-29
      1
      回复
    • Gavin
      Gavin
      2020-03-29
      值得注意一点就是小程序IDE会报500错找不到图片资源,手机上显示是正常的,开启真机调试也是会报错的,应该是新的canvaType2D还没有完善,官方还请尽快修复,搞了我一天今天想到过来回复一下
      2020-03-29
      回复
    查看更多(6)
  • Dave.代
    Dave.代
    2020-03-08

    同问,也遇到同样问题

    2020-03-08
    有用
    回复
  • 猿猿猿ಠ_ರೃ树林
    猿猿猿ಠ_ರೃ树林
    2020-03-07

    谢邀,可以把图片放到图片服务器再配置合法域名用wx.getImageInfo或wx.downloadFile缓存到本地试试


    2020-03-07
    有用
    回复
  • phoenixor
    phoenixor
    2020-03-06

    我也是这个需求,用的写法2,请问怎么解决????

    2020-03-06
    有用
    回复 7
    • suns
      suns
      2020-03-06
      我也没解决,运营人员说createImage这个API不支持本地tmp路径,但是我drawImage用旧的canvas还会有bug,运营人员说让试试新的canvas,这不是自相矛盾吗,难受😣
      2020-03-06
      回复
    • phoenixor
      phoenixor
      2020-03-06回复suns
      我用的就是新的canvas 2d,drawImage不支持本地临时图片吗??那我的需求是先把图表保存成图片,再到海报页绘制到画布上,怎么解决??
      2020-03-06
      回复
    • Gavin
      Gavin
      2020-03-29
      没有不支持我用临时路径都可以
      2020-03-29
      回复
    • Gavin
      Gavin
      2020-03-29
      回复晚了当天忙着忙着忘了回来回复了
      2020-03-29
      回复
    • Da
      Da
      2020-04-14回复Gavin
      可以提供drawImage临时文件成功的代码片段吗?
      2020-04-14
      回复
    查看更多(2)

正在加载...

登录 后发表内容
问题标签