uni-app uni.getImageInfo无法获取本地图片及网络图片信息

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

uni-app uni.getImageInfo无法获取本地图片及网络图片信息

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.36

浏览器平台：Chrome

浏览器版本：版本 131.0.6778.205（正式版本） （64 位）

示例代码：

const img_make = () => {
uni.getImageInfo({
src:'/static/DLZX.jpg',
// src:img_link.value,
success(res) {
console.log(res)
var ctx = uni.createCanvasContext("myCanvas") // 使用画布创建上下文 图片
ctx.drawImage(res.path, 0, 0, 250, 350) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
ctx.setFontSize(12) //设置字体大小，默认10
ctx.setFillStyle('#000000'); // 假设你想要黑色文字
ctx.setTextAlign('left') //文本水平居中
ctx.fillText(form.img_link_name, 60, 145); //文字内容、x坐标，y坐标
ctx.save(); //保存
ctx.draw(false, () => { // 确保绘制完成后再保存图片
save_img();
});
},
fail(err) {
console.error('获取图片信息失败:', err);
}
})
}


操作步骤：

使用onLoad调用
/static/DLZX.jpg用<image></image>可以访问到

预期结果：

返回base64格式的图片信息


实际结果：

errMsg: "getImageInfo:fail"

bug描述：

uni.getImageInfo获取本地图片以及网络图片信息都获取不到！！！ 前几次可以获取到，后来hbuilderX卡崩之后就获取不到了 hbuilderX正式版和Alpha版都获取不到


Harmonyos Next教程
1 回复

在uni-app中，uni.getImageInfo API 通常用于获取本地图片的信息，例如图片的尺寸、类型等。然而，对于网络图片，直接使用 uni.getImageInfo 可能无法直接获取到图片信息，因为该API设计初衷是用于本地图片路径。

对于本地图片，uni.getImageInfo 应该能够正常工作，只要提供的路径是有效的本地路径。以下是一个简单的示例代码，展示如何获取本地图片信息：

// 假设有一张本地图片位于 /static/images/local.png
uni.getImageInfo({
    src: '/static/images/local.png',
    success: function (res) {
        console.log('本地图片信息:', res);
        // res.width, res.height, res.path 等属性可用于后续操作
    },
    fail: function (err) {
        console.error('获取本地图片信息失败:', err);
    }
});

对于网络图片，由于 uni.getImageInfo 的限制，我们需要采用其他方法。一种常见的做法是通过创建一个临时的 <image> 元素，并将其 src 属性设置为网络图片的URL，然后监听图片的加载事件来获取图片的自然宽度和高度等信息。以下是一个示例代码，展示如何通过创建 <image> 元素来获取网络图片信息：

// 假设有一张网络图片 URL
const imageUrl = 'https://example.com/path/to/image.jpg';

// 创建一个 Image 对象
const img = new Image();
img.crossOrigin = 'Anonymous'; // 允许跨域请求，如果需要的话

img.onload = function () {
    // 图片加载完成后获取其自然宽度和高度
    console.log('网络图片信息:', {
        width: img.naturalWidth,
        height: img.naturalHeight,
        type: img.src.split('.').pop() // 简单获取图片类型，可能不准确
    });
};

img.onerror = function (err) {
    console.error('加载网络图片失败:', err);
};

// 设置图片源 URL
img.src = imageUrl;

需要注意的是，上述方法虽然可以获取到网络图片的自然宽度和高度，但无法获取到像本地路径那样的详细信息（如文件路径）。此外，对于跨域图片，需要服务器设置正确的 CORS 策略，否则 img.crossOrigin = 'Anonymous' 将无法生效，导致图片加载失败。

在实际开发中，根据具体需求选择合适的方法，并处理好可能的异常情况，以确保应用的健壮性。

回到顶部