Wxml2Canvas在组件中的渲染获取不到元素问题

关注

原创最新推荐文章于 2026-07-14 16:05:13 发布 289 阅读 AI 写同款· GEO 优化 ›

微信小程序wxml2canvas插件图片生成常见问题与优化方案本文详细解析了微信小程序中使用wxml2canvas插件进行图片生成的常见问题与优化方案。从基础配置、字体加粗失效、图片加载与绘制问题到性能优化技巧，提供了全面的解决方案。特别针对网络图片加载、绘制顺序优化、滚动内容错乱等典型问题给出了代码示例，并比较了Painter插件和服务端生成等替代方案，帮助开发者高效实现小程序图片生成功能。阅读详情

在组件中使用Wxml2Canvas时，可能会出现无法获取DOM元素导致图片生成失败的问题。这可能是由于组件内部的bug引起的。

问题根源在于初始化时配置参数的赋值方式：

this.object = options.obj;
this.obj = options.obj;  // 解决方案

但在插件在获取wxml时判断条件使用的是this.obj：

if(this.obj) {
    query = wx.createSelectorQuery().in(this.obj);
} else {
    query = wx.createSelectorQuery();
}

解决方案：可以在constructor中同步为this.obj赋值：

constructor (options = {}) {
    this.device = wx.getSystemInfoSync && wx.getSystemInfoSync() || {};
    
    if (!options.zoom) {
        this.zoom = this.device.windowWidth / 375;
    } else {
        this.zoom = options.zoom || 1;
    }   
    ...
    this.element = options.element;
    this.object = options.obj;
    this.obj = options.obj;
    ...

    this._init();
}