评论

[坑] 解决画布(Canvas)真机绘制图片(drawImage)不显示的问题

画布(Canvas)真机绘制图片(drawImage)不显示的问题及解决方案

项目有一个使用二维码图片(远程url)生成海报的功能,基于微信的画布(canvas)接口实现,开发者工具生成无问题,到真机后发现图片未绘制出来( 准确的说的绘制后保存tempFile没有图片,但文字内容都是ok的 )。经过一番摸索猜测原因为真机canvas无法实时绘制远程图片资源(可能是异步、执行顺序的问题?)。

通过以下方式解决:

先使用getImageInfo接口预加载远程图片,让后用预加载的缓存图片进行绘制。

示例代码:

let ctx = wx.createCanvasContext('your-canvas-id')
let remote_url = 'https://xxx.com/your-image.png';

wx.getImageInfo({
   	src : remote_url,
	success : res => {
    	//res.path 为getImageInfo预加载的缓存图片地址
    	ctx.drawImage( res.path , x, y, w, h);
	}
 });
点赞 1
收藏
评论

10 个评论

  • はち
    はち
    2019-03-01

    附加一条:资源为https,否则上线后可能拿不到资源哦(域名限制:开发环境、开启调试都可以)

    2019-03-01
    赞同 1
    回复
  • 去码头整点薯条
    去码头整点薯条
    08-26

    2024年了,这个问题解决了吗

    08-26
    赞同
    回复
  • 南山客
    南山客
    08-21

    2024年了,这个问题解决了吗

    08-21
    赞同
    回复
  • 铁郭炖考拉
    铁郭炖考拉
    04-29

    现在这个问题都没有解决

    04-29
    赞同
    回复 2
    • 羽
      07-24
      解决了么老哥,我现在也遇到了这个问题
      07-24
      回复
    • L.
      L.
      07-31回复
      检查一下画布的宽高是否是动态设置的,我就是动态设置的,在模拟器是正常的,上真机就出问题了。如果是动态设置的保证drawImage的时候,画布长宽已经被设置好
      07-31
      回复
  • 木木🎈
    木木🎈
    2021-03-12

    用了这个方法同样不显示

    2021-03-12
    赞同
    回复
  • 好炫
    好炫
    2020-09-29

    同样有这个问题,有解决方案么?

    2020-09-29
    赞同
    回复
  • 寒
    2019-08-08

    没用

    2019-08-08
    赞同
    回复
  • Hasaki
    Hasaki
    2019-03-04

    难道一开始不应该放到回调里面吗,,

    就算你在web上开发也是要把drawImage放在你new Image的onlond回调里啊。

    2019-03-04
    赞同
    回复
  • 2019-03-01

    2019-03-01
    赞同
    回复
  • 2019-02-28

    这个坑我也遇到了...

    2019-02-28
    赞同
    回复
登录 后发表内容