js获取上传本地图片的宽高并且可以输出出来其他变量使用

在JavaScript中，获取本地图片的宽度和高度通常需要借助HTML5的File API，特别是`FileReader`对象。下面是一个简单的步骤示例：

首先，用户选择图片文件，你可以通过`input[type=file]`元素来触发选择：

<input type="file" id="imagePicker" accept="image/*" />

然后，在JavaScript中处理文件选择事件：

document.getElementById('imagePicker').addEventListener('change', function (event) {
    var file = event.target.files[0]; // 获取用户选择的第一个文件

    if (!file) return;

    var reader = new FileReader();
    reader.onload = function (loadEvent) {
        var imgData = loadEvent.target.result; // 图片数据，通常是一个DataURL

        // 创建一个Image对象，并设置其src属性
        var image = new Image();
        image.src = imgData;

        // 当图片加载完成时，我们可以获取到它的宽高
        image.onload = function () {
            var width = this.width;
            var height = this.height;

            // 输出或者存储宽高值，比如在一个对象中
            var imageData = {width: width, height: height};

            console.log(imageData); // 打印到控制台
            // 或者将数据传递给其他函数或组件使用
            handleImageData(imageData);
        };
    };

    reader.readAsDataURL(file); // 使用FileReader读取文件内容并转换为DataURL
});

在这个例子中，当图片加载完成后，`onload`回调会被触发，此时你可以获取到图片的宽度(`this.width`)和高度(`this.height`)。