uni-app名片图片额外需求：通过网络图片链接生成海报，使用wx.getImageInfo后仍为空白，应如何解决？

gougou168 1楼•1 天前

在uni-app中处理网络图片并生成海报时，如果遇到使用wx.getImageInfo后图片仍为空白的问题，通常是因为图片未能正确加载或加载时机问题。为了解决这个问题，可以采用以下步骤和代码示例，确保图片能够正确加载并生成海报。

步骤一：确保网络图片可以访问

首先，确认网络图片链接是有效的，可以通过在浏览器中访问该链接来验证。

步骤二：使用uni-app的`getImageInfo`方法

uni-app提供了自己的getImageInfo方法，可以在uni.getImageInfo中直接传入网络图片URL。但是需要注意，uni-app的API和微信小程序有所不同，确保在正确的平台和环境下使用。

步骤三：处理异步加载

由于网络图片的加载是异步的，需要在图片加载完成后再进行后续操作。

代码示例

以下是一个使用uni-app生成海报的代码示例，其中包含了从网络图片生成海报的逻辑：

// 假设我们有一个网络图片URL
const networkImageUrl = 'https://example.com/path/to/image.jpg';

// 使用uni.getImageInfo获取图片信息
uni.getImageInfo({
    src: networkImageUrl,
    success: function(res) {
        // 获取图片路径
        const imgPath = res.path;

        // 创建canvas上下文
        const ctx = uni.createCanvasContext('myCanvas');

        // 设置canvas大小（假设海报大小为宽300，高500）
        ctx.setCanvasSize(300, 500);

        // 绘制背景（例如白色背景）
        ctx.setFillStyle('#FFFFFF');
        ctx.fillRect(0, 0, 300, 500);

        // 绘制网络图片
        ctx.drawImage(imgPath, 0, 0, 300, 300); // 假设图片占据canvas的上半部分

        // 绘制其他内容（例如文字）
        ctx.setFontSize(20);
        ctx.setFillStyle('#000000');
        ctx.fillText('这是我的名片', 10, 400);

        // 绘制到canvas
        ctx.draw(false, function() {
            // 生成海报图片
            uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function(tempFileRes) {
                    // tempFileRes.tempFilePath即为生成的海报图片路径
                    console.log('海报生成成功：', tempFileRes.tempFilePath);
                    // 可以在这里将海报图片路径保存到服务器或显示给用户
                },
                fail: function(err) {
                    console.error('海报生成失败：', err);
                }
            });
        });
    },
    fail: function(err) {
        console.error('获取图片信息失败：', err);
    }
});

注意事项

确保networkImageUrl是有效的网络图片链接。
uni.createCanvasContext中的myCanvas是你在页面中定义的canvas的id。
异步处理非常重要，确保在图片加载完成后再进行绘制操作。