uni-app uni.share iOS下图片大于20kb不显示的bug

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app uni.share iOS下图片大于20kb不显示的bug

示例代码：

uni.share({  
  provider: 'weixin',  
  scene,  
  title: 'title',  
  summary: 'summary',  
  href: 'https://www.baidu.com',  
  imageUrl: 'https://file.todcy.cn/visit/files/dcwm/2024/11/jpg/9ae10df232f4419ba8b8d0545ef380b11732944068380/1319518519427104/9ae10df232f4419ba8b8d0545ef380b11732944068380_download.jpg',  
  success: (success) => {  
    console.log('success', success);  
  },  
  fail: (fail) => {  
    console.log('fail', fail);  
  },  
});

操作步骤：

  1. 在iOS中调用uni.share分享至朋友。

预期结果：

不限制图片大小，分享后缩略图可见。

实际结果：

在iOS中调用uni.share分享至朋友，缩略图不显示； 但分享配置的imageUrl压缩至20kb后，分享后缩略图可见。

bug描述：

iOS下uni.share的imageUrl图片大于20kb不显示，如下：


Harmonyos Next教程
4 回复

文档说明了，图文模式下不推荐大于20k的


话虽如此，但是原生iOS端分享时是没有20kb的限制的，20kb很有限……

回复 yrj: 说这些也没用，你大于20k大概率就是显示不出来，想办法解决问题吧

针对您提到的uni-app中uni.share在iOS平台下图片大于20KB不显示的问题，这通常是由于iOS系统对分享组件的限制或者uni-app框架在某些版本中的bug导致的。虽然直接给出建议可能不是您的要求，但提供代码案例时，我们可以展示如何通过预处理图片（如压缩）来规避这个问题。下面是一个使用Canvas API对图片进行压缩并分享的示例代码：

// 引入uni-app的文件系统模块
const fs = uni.getFileSystemManager();

// 图片压缩函数
function compressImage(src, maxWidthOrHeight, outputQuality, successCallback, errorCallback) {
    uni.getImageInfo({
        src: src,
        success: (imageInfo) => {
            const ctx = uni.createCanvasContext('compressCanvas');
            const { width, height } = imageInfo;
            let targetWidth = width;
            let targetHeight = height;

            if (width > maxWidthOrHeight || height > maxWidthOrHeight) {
                const ratio = Math.min(maxWidthOrHeight / width, maxWidthOrHeight / height);
                targetWidth = Math.round(width * ratio);
                targetHeight = Math.round(height * ratio);
            }

            ctx.drawImage(src, 0, 0, targetWidth, targetHeight, 0, 0, targetWidth, targetHeight);
            ctx.draw(false, () => {
                uni.canvasToTempFilePath({
                    canvasId: 'compressCanvas',
                    destWidth: targetWidth,
                    destHeight: targetHeight,
                    quality: outputQuality,
                    success: (res) => {
                        successCallback(res.tempFilePath);
                    },
                    fail: errorCallback
                });
            });
        },
        fail: errorCallback
    });
}

// 使用压缩后的图片进行分享
function shareImage(compressedImagePath) {
    uni.share({
        provider: 'weixin', // 或其他分享平台
        scene: 25, // 分享到朋友圈（具体场景值根据平台文档确定）
        type: 'image',
        href: '', // 如果需要网页链接，可以填写
        imageDataUrl: compressedImagePath, // 这里传入压缩后的图片路径
        success: function () {
            console.log('分享成功');
        },
        fail: function (err) {
            console.error('分享失败', err);
        }
    });
}

// 示例调用
const originalImagePath = '/path/to/your/image.jpg';
compressImage(originalImagePath, 300, 0.8, (compressedPath) => {
    shareImage(compressedPath);
}, (err) => {
    console.error('图片压缩失败', err);
});

注意：

  1. 上述代码中，compressCanvas是一个需要在页面wxml中定义的canvas组件的id。
  2. maxWidthOrHeight参数用于控制压缩后的图片最大宽度或高度，outputQuality用于控制输出图片的质量（0到1之间的小数）。
  3. 分享时使用的provider和scene参数需要根据实际使用的平台和场景进行调整。

通过这种方式，即使原始图片大于20KB，也可以通过压缩后的小图进行分享，从而规避iOS平台的限制。

回到顶部