1
收藏
评论

[坑] 解决画布(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);
	}
 });
最后一次编辑于  02-27  (未经腾讯允许,不得转载)
复制链接赞 1收藏投诉评论

5 个评论

  • 渡
    02-28

    这个坑我也遇到了...

    02-28
    赞同
    回复
  • 烟雨海花 lwl
    烟雨海花 lwl
    03-01

    03-01
    赞同
    回复
  • はち
    はち
    03-01

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

    03-01
    赞同
    回复
  • 兰昊
    兰昊
    03-04

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

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

    03-04
    赞同
    回复
  • 寒
    08-08

    没用

    08-08
    赞同
    回复