鸿蒙分享WEB页面,缩略图是用本地图片无法显示问题

鸿蒙分享web页面代码如下:
```let req: SendMessageToDD.Req | undefined = undefined;
let webpMessageObject = new DDWebPageMessage();

webpMessageObject.mUrl = "https://m.xxxx.com"
let webpMessage = new DDMediaMessage();
webpMessage.mMediaMessageObject = webpMessageObject;
webpMessage.mTitle = "标题"
webpMessage.mContent = "内容"
const thumbData = await getContext().resourceManager.getMediaContent($r("app.media.ic_ding_ding_share_thumb"))
const thumbPixel = image.createImageSource(thumbData.buffer).createPixelMapSync()
const thumbBuffer = await image.createImagePacker().packToData(thumbPixel, { format: "image/png", quality: 100 })
webpMessage.mThumbData = new Uint8Array(thumbBuffer)
req = new SendMessageToDD.Req();
req.mMediaMessage = webpMessage;
DingTalkShare.share(req, true)
```
分享到钉钉后图片无法显示,相同的图片分享到微信没有问题。

在吐槽一下,钉钉分享连个专属提问的地方都没有,真服了。

展开
收起
1148166054236640 2025-11-05 18:50:53 19 分享 版权
1 条回答
写回答
取消 提交回答
  • 北京阿里云ACE会长

    钉钉分享时 mThumbData 只认 JPEG + 85 以下质量 + 32 kB 以内,你现在给了 PNG + 100 质量,直接超限,导致缩略图被丢弃。

    参考程序

    import { image } from '@kit.ImageKit';
    
    // 1. 读本地图片
    const thumbData = await getContext().resourceManager
                     .getMediaContent($r('app.media.ic_ding_ding_share_thumb'));
    
    // 2. 转成 PixelMap
    const pixelMap = image.createImageSource(thumbData.buffer)
                          .createPixelMapSync();
    
    // 3. 压缩成 **JPEG,质量 75,最长边 120 px**
    const packOpts: image.PackingOption = {
      format: 'image/jpeg',
      quality: 75,
      size: { width: 120, height: 120 }   // 等比缩放,钉钉内部会再压
    };
    const thumbBuffer = await image.createImagePacker()
                                   .packToData(pixelMap, packOpts);
    
    // 4. 保证 ≤ 32 kB
    console.info('thumb size=' + thumbBuffer.byteLength); // 调试用
    if (thumbBuffer.byteLength > 32768) {
      // 再压一次,质量降到 60
      packOpts.quality = 60;
      thumbBuffer = await image.createImagePacker()
                               .packToData(pixelMap, packOpts);
    }
    
    // 5. 塞进消息体
    webpMessage.mThumbData = new Uint8Array(thumbBuffer);
    

    微信对缩略图格式/大小容忍度高,PNG 100 质量 80 kB 也能收;
    钉钉服务端会做二次校验,超限就直接丢弃,客户端表现为“空白缩略图”。

    图片必须 JPEG(钉钉文档隐藏限制)。
    单张 ≤ 32 kB(实测 33 kB 就会被刷掉)。
    分辨率不用太高,120×120 足够,越大越容易被压爆。
    如果仍不显示,把 mUrl 里的页面也补一张 og:image meta 图,钉钉fallback 会取它。

    2025-11-07 08:50:52
    赞同 3 展开评论
问答地址:

通义灵码是基于通义大模型的 AI 研发辅助工具,提供代码生成、研发问答、任务执行等能力,为开发者带来智能化研发体验,引领 AI 原生研发新范式。通义灵码兼容 Visual Studio Code、Visual Studio、JetBrains IDEs 等主流编程工具,并提供 Lingma IDE,开发者可以自由选择。 更多信息欢迎加入通义灵码用户交流群(钉钉群号53770000738)

收录在圈子:
+ 订阅

热门讨论

热门文章

还有其他疑问?
咨询AI助理